画像を同じ行に配置して整列させます。

Question

以下の構造を使用すると、画像は行内で均等に配置されません。あなたは、私は、次のコードを使用2番目と3番目の画像

間のより多くのスペースがある参照画像で

。

CSS：

img { 
 
    max-width: 100%; 
 
    margin: auto; 
 
} 
 

 
.grid { 
 
    margin: 0 auto; 
 
    max-width: 712px; 
 
    width: 100%; 
 
} 
 

 
.row { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
.col-4 { 
 
    width: 33.33%; 
 
}

<div class="row" > 
 
     <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder" align="left"></div> 
 
     <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder" align="center"></div> 
 
     <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder" align="right"></div> 
 
    </div>

the spaces among pictures are not equal PLS see image

Answer 1

私はこのためにフレキシボックスを使用することをお勧め：このCSS技術に

<div class="row pics-container" > 
    <div class="col-4 pic-wrapper"><img src="images/thmb1.jpg"></div> 
    <div class="col-4 pic-wrapper"><img src="images/thmb1.jpg"></div> 
    <div class="col-4 pic-wrapper"><img src="images/thmb1.jpg"></div> 
</div> 


.pics-container { 
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
} 

.pic-wrapper { 
    align-self: center; 
} 

簡潔かつ詳細な例ページはこちら存在します：Flexbox Playground

Answer 2

justify-content: space-between^[reference]でアイテムを均等に配置できます。あなたのコードの主な問題は、div要素のalign属性です。整列は、他のレイアウトコードと戦って、その奇妙な間隔を引き起こしています。

img { 
 
    max-width: 100%; 
 
    margin: auto; 
 
} 
 

 
.grid { 
 
    margin: 0 auto; 
 
    max-width: 712px; 
 
    width: 100%; 
 
} 
 

 
.row { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.col-4 { 
 
    flex: 1; 
 
}

<div class="row" > 
 
     <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"></div> 
 
     <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"></div> 
 
     <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"></div> 
 
    </div>