CSS使2列内容区域

我想离开使用表格来形成我的内容的布局，我可以想到两个替代品，我想更好地学习：（1）样式列表项目并排放置，（2）使用浮动在同一条线上的div块。这两种方法都会有我自己的用途。CSS使2列内容区域

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

总之，这是我的问题;我如何设计一个div的宽度，使其宽度为所占区域宽度的50％，而不是页面宽度的50％？

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

现在已经很晚了，我一直在为我的这个项目工作了大约8个小时，所以我很抱歉如果我问任何混淆。随意问我关于我想要做什么的任何问题。

谢谢，朋友。 :)

来源

2010-05-08 Joe Majewski

非常感谢你们。我从来没有理解，一个百分比宽度是由它已经包含在其中的元素的当前宽度决定的。而960.gs网站非常方便;书签。 :) 这些信息正是我所需要的。 – 2010-05-08 09:19:33

当您使用百分比单位表示宽度和高度时，它与第一个已定义宽度或高度的祖先元素相关。因此，所有你需要做的是建立一个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所说，使用CSS框架可能会带来很多价值，如960.gs

来源

2010-05-08 09:06:26 nickf

好的，所以为了帮助你最好我将指向你http://960.gs这是一个伟大的工具原型这种情况下，并获得可靠的代码。在您的实际问题，你可能要设置：

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

你想要分割的元素

。祝你好运。

来源

2010-05-08 09:02:49 Gabriel

虽然在框架上，我还建议http://www.blueprintcss.org/ – 2010-05-08 09:16:19

对于宽度，任何相对大小都是相对于父项的大小，因此将其作为子项放入要成为其中一半的元素内。对于列表项目...使用display: inline;或float: left;

来源

2010-05-08 09:03:43

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

ul li { 
    display:inline; 
}

如果你需要阻止就需要浮动的列表项和浮动可能是乏味的，有时，例如，你需要采取清除[uod]l元素的保健元素。

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

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

ul { 
    margin:0; 
    padding:0; 
}

来源

2010-05-08 09:14:46

CSS使2列内容区域

回答

相关问题