Question

我有5个div，我正在尝试按以下方式构建它们：

div的最小尺寸为100px
父母必须在第一行显示尽可能多的内容;其余的div应该包装到一个新行（如果需要，还可以包含更多行）
如果第一行具有非最佳大小，则div应该均匀分布（即父级大小为250px - 第一行有2个div，宽度为125px）。

我正在努力实现的一些例子：

200px： http://s22.postimg.org/5hj8m5qrl/es3.png
250px： http://s22.postimg.org/ikev5fgzl/es1.png
300px： http://s22.postimg.org/jy6i0qg8x/es2.png

如果父级的大小是450px，则应该有4个div，每个div的宽度为112.5px。

这是我尝试过的，但我只完成了包装。我不知道如何调整它们的大小：

HTML：

<div class="parent">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="clear"></div>

CSS

.parent{
    width: 250px;
    border: 2px solid red;
}

.parent .child {
    width: 96px;
    border: 2px solid black;
    float: left;
}

.parent .clear {
    clear: both;
}

指向jfiddle的链接：http://jsfiddle.net/Vbjv5/

我正在寻找一个可能的CSS解决方案，但如果在CSS中无法实现这一点，仍然欢迎使用javascript：）

Answer 1

像这样使用jquery。

jQuery(document).ready(function($) {
    var parent_width=$('.parent').width();
    var count=$('.item').length();
    var param=parent_width/count;
    $('.item').width(param);
});

CSS浮动宽度最大化？

1 个答案: