CSSテーブルの間にスペースを入れる方法（応答ウェブページ）

Question

私はCSSテーブルを持っていますが、最初の画像の左側と最後の画像の右側にはスペースを入れたいと思います。ここで

は、私が持っているもののスクリーンショットです：ここで

は私が望むもののスクリーンショットです：

現在のHTMLは次のとおりです。

<div id="footer"> 
     <div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div> 
     <div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div> 
     <div class="lower"><img src="images/three.jpg" alt="Flowers"/></div> 
     <div class="lower"><img src="images/four.jpg" alt="The rings"/></div> 
    </div> 

CSSは

です

#footer { 
    display: table; 
    width: 100%; 
    max-width: 1024px; 
    margin-top: 1%; 
} 

.lower { 
    display: table-cell; 
} 

#footer img { 
    width: 100%; 
    height: auto; 
    max-width: 256px; 
} 

これは応答性の高いWebページですので、スペースは常に残しておきたいと思いますが、デバイスのサイズに応じてスペースを変更したいので、％を使用してください。

Answer 1

hi pls apply this css and set padding 

.lower { 
display: table-cell; 
padding:0 20px; 
} 
.lower:first-child{ padding-left:0} 
.lower:last-child{ padding-right:0} 

Answer 2

これを適用してください。

#footer { 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    max-width: 1024px; 
    background-color: #F00; 
    padding: 0; 
    margin: 0; 
    max-height: content-height; 
} 

.lower { 
    margin-left: 2%; 
} 

#footer img { 
    width: 100%; 
    height: 100%; 
} 

Demo

Answer 3

display: flex;代わりのdisplay: table;

親にdisplay: flex;とjustify-content: space-between;を付けてみてください。

Answer 4

使用CSS隣接する要素セレクター：

.lower + .lower { 
    padding-left: 20px; 
} 

#footer { 
 
    display: table; 
 
    width: 100%; 
 
    max-width: 1024px; 
 
    margin-top: 1%; 
 
} 
 
.lower { 
 
    display: table-cell; 
 
} 
 
.lower + .lower { 
 
    padding-left: 20px; 
 
} 
 
#footer img { 
 
    width: 100%; 
 
    height: auto; 
 
    max-width: 256px; 
 
}

<div id="footer"> 
 
    <div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div> 
 
    <div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div> 
 
    <div class="lower"><img src="images/three.jpg" alt="Flowers"/></div> 
 
    <div class="lower"><img src="images/four.jpg" alt="The rings"/></div> 
 
</div>