0

我想实现一些最初对我来说看起来很简单但结果却并非如此的事情。

我的代码是：

<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”类是相同的，但必须清除之前的浮动（开始一个新行）。

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

这是否可能不使用Javascript，仅使用CSS？

4

3 回答 3

1

由于 contentdiv的数量将是动态的，因此您需要使用 javascript 来实现您想要的。没有 css 可以让您根据子元素的数量进行计算以计算出百分比宽度。

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

这里有些例子

纯 css（需要 html 布局更改）
jQuery

于 2013-04-29T16:01:42.130 回答
0

我发布了一个小提琴，我相信它可以回答你的问题。

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

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

然后，清除.rowstarter左侧。

#all .rowstarter {
    clear:left;
}

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

编辑：如果您在.rowstarterdiv 前面添加一个 div .first，.rowstarter则必须具有固定宽度，并且左边距.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
}

要实现居中，div#all您必须在其周围添加一个包装器，然后应用以下 css 技巧：

.wrapper {
    position: absolute;
    left: 50%;
}
#all {
    position: relative;
    left: -50%;
}
于 2013-04-29T15:37:36.400 回答
0

我已经建立了一个 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;
}
于 2013-04-29T15:04:10.447 回答