Question

我试图偏离使用表格来构建我的内容的布局，我可以想到两个我想更好地学习的选择：（1）样式列表项目是并排的，以及（2）使用漂浮在同一行上的div块。这些都有自己用于我正在做的事情。

我已经使用div标签来形成我的三列模板的整个布局，但我现在需要做的是有点不同。如果它有帮助，我的项目可以找到here。

总之，这是我的问题;我如何设置div的样式，使其宽度为其占据区域宽度的50％，而不是页面宽度的50％？

至于我的另一个问题，什么是样式列表项目的最佳方法，以便它们并排？我现在正在编写注册脚本，而不是使用左侧带有“Username”的表和右侧的输入文本，我可以使用两个列表项。

现在已经很晚了，我已经在我的这个项目上工作了大约8个小时，所以如果我问任何令人困惑的话我会道歉。如果我正在尝试做什么，请随时问我。

谢谢，朋友们。：）

Answer 1

当您使用百分比单位表示宽度和高度时，它相对于已定义宽度或高度的第一个祖先元素。因此，您需要做的就是设置一个与两列一样宽的div：

<div class="columnContainer">
    <div class="column">
        Column 1
    </div>
    <div class="column">
        Column 2
    </div>
</div>

.columnContainer {
    width: 800px;
}
.column {
    float: left;
    width: 50%;
}

除了上面的代码之外，还有更多关于需要的东西，但这是基础知识。正如Gabriel所说，使用像960.gs

这样的CSS框架可能会带来很大的价值

Answer 2

好的，为了最好地帮助你，我将指向你http://960.gs这是一个很好的工具，用于原型设计这种场景并获得可靠的可靠代码。关于您的实际问题，您可能想要设置：

width: 50%;
float: left;
display: block;

关于要拆分的元素。祝你好运。

Answer 3

对于宽度，任何相对大小都是相对于父级的，所以将它作为子级放在要想成为其一半的元素中。对于列表项...使用display: inline;或float: left;

Answer 4

内联列表很简单但有一些缺点，例如你无法设置高度或宽度。

ul li {
    display:inline;
}

如果你需要块元素，你需要浮动列表项，浮点数有时可能很乏味，例如你需要处理清除[uod]l元素。

ul {
    overflow:hidden;
}
ul li {
    float:left;
    display:block;
}

在这两种情况下，您可能希望删除列表本身的边距和填充。

ul {
    margin:0;
    padding:0;
}

CSS制作2列内容区域

4 个答案: