Question

我希望能够实现一些初步看起来很简单的东西，但事实证明并非如此。

我的代码是：

<html>
<head>
<style>
div {
border-top: 1px solid black;
margin: 10px;
}
div#all {
border: 0;
}
</style>
<body>
<div id=all>
<div class=first>First</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
</div>
</body>
</html>

我想得到的是“内容”类中的所有DIV都是从左到右依次设置的内嵌块（或浮点数）。

“rowstarter”类是相同的但必须清除before floats（开始一个新行）。

“第一个”DIV必须具有等于下面内容的宽度（因此，如果窗口宽度允许浏览器连续显示5个“内容”DIV，每个具有100px宽度，则“first”具有5 * 100px + 5 *（2 * 10px [margin]）= 600px如果6“内容”DIV然后“第一”具有720px宽度......）。

这可能不使用Javascript，只能使用CSS吗？

Answer 1

由于内容div的数量将是动态的，您需要使用javascript来实现您想要的效果。没有css允许您根据子元素的数量进行计算以计算百分比宽度。

javascript的替代方法是，如果您在生成html时知道每行中有多少div，则可以为宽度添加内联样式

以下是一些例子

Pure css (needs html layout change)
jQuery

Answer 2

我已经设置了一个可能回答你问题的jsFiddle。它现在还包含宽度，但添加的代码没有任何宽度，因此您可以自由使用您想要的内容

http://jsfiddle.net/agtFw/3

HTML：

<div id="all">
<div class="first">First</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>

为div提供2个或更多类是没有问题的，有时它会帮助你很多！

和css：

div {
border-top: 1px solid black;
margin: 10px;
}

div.content
{
    float:left;
}

div.rowstarter
{
    clear:left;
}

div#all {
border: 0;
}

Answer 3

我发布了a fiddle我认为可以回答你的问题。

首先，你必须给#all和每个子div，除了.first ，左浮动：

#all,
#all div {
    float: left;
}
#all .first {
    float: none;
}

然后，清除左侧的.rowstarter。

#all .rowstarter {
    clear:left;
}

你实际上根本不需要“内容”类（我建议删除它，因为它会使代码混乱并增加页面权重）。

修改：如果您在.rowstarter div前面添加.first div，则.rowstarter必须有固定的宽度且左边距为{ {1}}需要增加.first的宽度和边距之和。

.rowstarter

要实现#all .rowstarter { width: 100px; // arbitrary fixed width margin: 10px; // you've given all divs inside #all this margin, just restating for emphasis } #all .rowstarter + .first { margin-left: 130px; // width of .rowstarter, plus its left and right margins and .first's original 10px left margin }的居中，你必须在它周围添加一个包装器，然后应用以下css技巧：

div#all

DIV宽度与其他DIV的内容，浮动和居中所有

3 个答案: