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（bootstrap，宽度：58％），那么它不适用于宽屏幕。

我是否可以通过其他方式设置排列而无需设置宽度？

Answer 1

你浮动的问题是你的第一个左浮动的高度。左侧浮子上有足够的高度，以防止盒子1和2落在它下面而不是盒子3上。有两种方法可以防止这种情况发生。您可以将人工高度添加到.sidebar，高度为：300px;或类似的东西。或者您可以使用更常见的练习并使用左右浮动。所以你的.sidebar会漂浮：左;你的.content将是浮动的：对;如果您选择使用不同的浮点数，则应声明每个说明的宽度.sidebar的宽度为：30％;和.content的宽度为：70％;您可以使用它们所在宽度的百分比来帮助格式化页面样式。如果使用边框，则必须更改百分比以适应它们。

Answer 2

清除content 类

就像这样

.content{overflow:hidden;}

<强> Demo

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

选项二

并定义您的content 类

float left

就像这样

.content{float:left;}

2列设计，主要内容包含我需要以2列布局对齐的框

HTML

CSS

2 个答案:

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