html - 将最大宽度设置为容器

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

向左飘浮;

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 函数插入元素，而不是简单地更改它的可见性。