Question

这是我的admin panel，我想用div分成2列。左边的div是一个菜单，并设置了这个样式：

#menu_left{
position: fixed;
float: left;
width: 300px;
height: 100%;
top: 0;
left: 0;
background: #666;
color: white;
}

正确的是内容并具有这种风格：

#content{
text-wrap: unrestricted;
float:left;
width: 100%;
    left: 300px;
}

它不起作用，它应该工作，我希望它包装文本，但它没有。如果有任何错误的样式设置，请告诉我。

哦，html：

<body>
    <div id="menu_left">
        <h1>Menu</h1> <hr />
    </div>
    <div id="content"></div>
</body>

Answer 1

您的内容宽度为100％，因为#menu_left的宽度使其在窗口右侧突出300px。您应该将此值设为某个像素值，或将#menu_left更改为％宽度，例如20％，然后内容可以为80％并且它们非常适合。

另外，您应该从left: 300px;移除#content，由于float: left;，它已经到了您想要的位置。

Answer 2

清除这些线条，你应该好好去。

#menu_left{
position: fixed; <--don't need
float: left;
width: 300px;
height: 100%;
top: 0; <--don't need
left: 0; <--don't need
background: #666;
color: white;
}

#content{
text-wrap: unrestricted; <--don't need (you really want to break letters in the same word?)
float:left;
width: 100%;
left: 300px; <--don't need
}

使用预制系统比尝试从头开始更有意义。我建议使用像grid960 http://960.gs/

这样的css系统

使用文本换行将站点划分为2列

2 个答案: