こんにちは、レイアウトについて質問があります。
div に情報を入力する Web サイトがあります。これらの Div は、それらの間とコンテナー div の側面の間に同じ量のスペースを置いて、互いに隣接する必要があります。私は携帯電話用に作成しているので、画面の幅はわかりませんが、さまざまな画面解像度でうまく表示されるはずです。
現在、私はこれを持っています: Fiddle: Fiddle
HTML:
<div id="container">
<div id="lineout">
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
<div id="foto"><img src="img/logo_null_image.jpg" /></div>
</div>
</p>
CSS:
#container {
text-align: center;
display: inline-block;
margin:0 auto;
}
#foto{
width: 150px;
height: 150px;
display: inline-block;
}
#lineout {
text-align:justify;
}
次に、それらの間に等量のスペースがありますが、コンテナーの側面の間にはありません。
私が知っていることは、それらが150px x 150pxであるということです。それらとコンテナーの間には同じ量の余白が必要であり、ディスプレイのサイズは関係ありません。画面が小さい場合、隣接する div は少なくなりますが、それらの間のスペースは増加または縮小するはずです。したがって、それらとコンテナ div の間のマージンは同じです。
これが私が望む方法のイメージです:) s7.postimage.org/h342d0qhn/layout2.png
私の質問を再定式化：
<div class="content">
<div class="elements-grid">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>
「要素」の div 間に柔軟な/折りたたみ可能なマージンが必要です。ギャップはブラウザの幅に依存し、折りたたむ前に「最大幅」と「最小幅」を持つ必要があります（次の要素は次の行に切り替わります）。「要素グリッド」は「コンテンツ」内の中央に配置する必要があります。
私が知っていることはすべて試したので、あなたの助けに本当に感謝しています. 前もって感謝します！