Question

我想根据div宽度显示多行。

类似的东西：

<div style="width: 100%">
  <div style="width: 300px"><img src="img1.jpg"><br />Image name 1</div>
  <div style="width: 300px"><img src="img2.jpg"><br />Image name 2</div>
  <div style="width: 300px"><img src="img3.jpg"><br />Image name 3</div>
  <div style="width: 300px"><img src="img4.jpg"><br />Image name 4</div>
  <div style="width: 300px"><img src="img5.jpg"><br />Image name 5</div>
</div>

因此，如果布局宽度为600px，则每行仅显示2个图像，如果900px - 每行3个图像。

有人对我有任何建议吗？

Answer 1

通常通过将float: left样式应用于内部div来解决此问题，如下例所示：

<div style="width: 100%; overflow: hidden;">
  <div style="width: 300px; float: left;">...</div>
  <div style="width: 300px; float: left;">...</div>
  <div style="width: 300px; float: left;">...</div>
</div>

您还应该在容器div上应用overflow: hidden技巧来解决此Stack Overflow帖子中描述的问题：CSS container doesn’t stretch to accomodate floats。

Answer 2

假设：

<div id="outer">
  <div><img src="img1.jpg><br/>Image name 1</div>
  ...
</div>

尝试：

#outer { overflow: hidden; }
#outer div { float: left; }

overflow: hidden很重要，因为它会阻止外部div折叠到高度0，因为它只包含浮点数。

Answer 3

试试这个：

HTML

<ul class="gallery">
    <li><img src="#1" alt="1"/><br/>Title 1</li>
    <li><img src="#2" alt="2"/><br/>Title 2</li>
    <li><img src="#3" alt="3"/><br/>Title 3</li>
</ul>

CSS

.gallery {list-style: none}
.gallery li {list-style: none; display: inline;}
.gallery img { vertical-align: middle}

根据div宽度显示多行图像

3 个答案: