Question

如何配置我的css以确保一旦容器的垂直长度超过375px，它会自动添加第一行旁边的图像？

看看我下面的DEMO

HTML

<div class="panes">

<div id="one">
<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>

<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>

<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>

</div>

CSS

.panes {
max-width:375px?
}

Answer 1

float：left;

http://jsfiddle.net/LTtEN/

你走了：

<div class="panes">
<div class="test">
<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>
</div>

<div class="test">
<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>
</div>

<div class="test">
<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>
</div>

<div class="test">
<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>
</div>

CSS：

.panes {width:375px}
.test {float: left; width: 100px; padding: 6px;}

Answer 2

首先，垂直长度由height属性给出，而不是width。

其次，你需要一些javascript来做你想做的事。将图像插入要放置的位置，并使其属性为visibility = "hidden";。

然后，在加载或更适合您的问题的事件上使用javascript函数，以便此函数将图像的可见性重置为visibility = "visible"。

您可以使用javascript函数插入元素，而不是简单地更改它的可见性。

将最大宽度设置为容器

2 个答案: