css - 2 列设计，主要内容包含我需要在 2 列布局中对齐的框

Question

这是我的代码示例：

http://jsfiddle.net/9ECkE/1/

HTML

<div class="wrapper">
    <div class="sidebar">
        <ul>
            <li>
                test
            </li>
            <li>
                test
            </li>
            <li>
                test
            </li>
        </ul>
    </div>
    <div class="content">
        <div class="box one">Box 1</div>
        <div class="box two">Box 2</div>
        <div class="box three">Box 3</div>
    </div>
</div>

CSS

.box{float:left; padding:20px; border:1px solid red;}
.three{clear:left;}
.sidebar{float:left;}

我尝试将 float:left 添加到 .content{} 但是，这仅在屏幕宽时有效，对于移动显示，完整内容区域最终会位于侧边栏下方。如果我尝试使用 span7（引导程序，宽度：58%），那么它不适用于宽屏。

有没有另一种方法可以设置排列而不需要设置宽度？

Answer 1

您遇到的浮动问题是由于您的第一个左侧浮动的高度。左侧浮子上有足够的高度可以防止框 1 和 2 掉到它下面，但框 3 没有。有两种方法可以防止这种情况。您可以在 .sidebar 中添加人工高度，高度为：300px；或类似的东西。或者您可以使用更常见的做法并使用左右浮动。所以你的 .sidebar 会是 float: left; 并且您的 .content 将是浮动的：对；。如果您选择使用不同的浮动，您应该声明每个说的宽度 .sidebar 将具有宽度：30%; 并且 .content 的宽度为：70%；。您可以使用它们的宽度百分比来帮助格式化页面样式。如果您使用边框，则必须更改百分比以适应它们。

Answer 2

清除你的content 班级

像这样

.content{overflow:hidden;}

演示

-------------------------

选项二

并定义你的content 班级

float left

像这样

.content{float:left;}