不同的 div 2 列布局答案

【问题标题】：Different div 2 column layout不同的 div 2 列布局
【发布时间】：2012-07-07 01:49:39
【问题描述】：

这与简单的 2 列布局不同。

我需要这个 html：

<div class="menu">
    <div class="right">One</div>
    <div>Three</div>
    <div>Four</div>
    <div class="right">Two</div>
    <div class="right">Two</div>
    <div>Four</div>
    <div class="right">Two</div>
</div>

div 类菜单有一个静态宽度，我需要其中的 div 进入右列，而普通 div 保持原样。

这是我目前得到的 CSS，但我似乎还无法弄清楚：

div.menu {
    width: 550px;
}
div.menu div {
    float: left;
    width: 200px;
}
div.menu div.right {
    float: right;
}

里面的 div 顺序是随机的，所以我不能将它们包含在一个 div 中并使其浮动。

这是上面 HTML 代码的粗略草图：

alt text http://img102.imageshack.us/img102/4494/flytc3.jpg

【问题讨论】：

你真的被那个html卡住了吗？如果是这样，那么我认为您唯一的选择是做一些非常丑陋的事情。你可以用javascript修改结构还是禁止？
我一直在寻找一个纯 CSS 解决方案，是的，我被那个 HTML 卡住了。
这与编程有关吗？在我看来更像是设计。

标签： html css css-float

【解决方案1】：

试试：

div.menu div {
    float: left;
    clear: left;
}
div.menu div.right {
    float: right;
    clear: right;
}

【讨论】：

【解决方案2】：

我似乎无法弄清楚您要达到的目标。您能否在 MS Paint 中创建一些基本草图，以便我们为您提供帮助？

编辑：也许我不明白这里的某些内容，但这正是它在我的 Chrome 窗口中的外观（嗯，除了填充）。

【讨论】：

我同意。我猜他需要浮动两个 div（向右和向左）并在之后有某种清除元素，如果他不能更改 div 顺序或其他任何东西。