使用 textwrap 将网站分为 2 列答案

【问题标题】：Dividing site into 2 columns with textwrap使用 textwrap 将网站分为 2 列
【发布时间】：2013-04-11 03:58:40
【问题描述】：

这是我的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>

【问题讨论】：

标签： html css administration

【解决方案1】：

由于#menu_left 的宽度，内容的宽度为 100%，这使得它在窗口右侧突出 300 像素。您应该将其设为一些像素值，或者将#menu_left 更改为 % 宽度，例如 20%，然后内容可以是 80%，它们会很合适。

另外，您应该从#content 中删除left: 300px;，因为float: left;，它已经到达您想要的位置。

【讨论】：

left: 300px 需要在那里，位置原因：fixed；否则它会跳到左边。我可以使用 javascript 返回浏览器的窗口宽度吗？然后以像素为单位制作#content的宽度？
我要制作和
不使用JS，很难将百分比与像素值混合。
我现在按照我的意愿做了。我使用了 jQuery。

【解决方案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 系统

【讨论】：

我完全不同意这一点，模板是收缩的，不是很好的老师。你会有垃圾，这是学习过程的一部分。你必须尝试一些东西才能看到它的作用。
您无需尝试 text-wrap: unrestricted 即可知道它的作用。我非常喜欢阅读文档。花时间学习如何在第一次就正确地做到这一点。你不会马上得到所有东西，但我要说的是做好功课。 w3schools.com/cssref
我这样做是为了自学，我喜欢从头开始。我觉得自己的代码比别人的更舒服。而且您发布的“修复”不起作用。我会坚持使用 js/jquery。