Question

我一直在尝试使用css创建一个简单的两列布局而不使用浮点数。我发现有几个建议使用<ul>，每个<li>都是一列。我试过了，我似乎无法让它工作。这是我的示例代码。

<ul id="blogWrapper">
    <li id="testBlogCol1">Column 1</li>
    <li id="testBlogCol2">Column 2</li>
</ul>

#blogWrapper {
    width: 65%;
    height: auto;
    min-width: 45%;
    margin: 0 auto;
    border: 1px solid #cccccc;
    background-color: #fff;
}

#blogWrapper ul li {
    display: inline;
}

#testBlogCol1 {
    width: 40%;
    height: auto;
    background-color: #f5f5f5;
}

#testBlogCol1 {
    width: 60%;
    height: auto;
    background-color: #fff;
}

而不是像我想要的那样将<li>分成两列，它们就像正常一样堆叠在一起。有什么建议吗？

Answer 1

写inline-block而不是inline，因为inline元素没有width, height, vertical margin & vertical padding。

这样写：

#blogWrapper ul li {
    display: inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
}

Answer 2

使用以下CSS：

#blogWrapper {
    width: 65%;
    height: auto;
    min-width: 45%;
    margin: 0 auto;
    border: 1px solid #cccccc;
    background-color: #fff;
}
#blogWrapper
{
  overflow: hidden;    
}
#blogWrapper li {
    float: left;
    display: block;
}

#testBlogCol1 {
    width: 40%;
    height: auto;
    background-color: #f5f5f5;
}

#testBlogCol2 {
    width: 50%;
    height: auto;
    background-color: #fff;
}

目前使用overflow：hidden来扩展UL，只要LI是。否则，UL之后的内容将显示在与UL相同的位置。

您目前正在撰写#blogWrapper ul，而#blogWrapper是您的UL。这样CSS就没有效果了您使用的CSS包含#testBlogCol1两次。

活小提琴：http://jsfiddle.net/wHz94/

带有<ul> </ul>的双列布局

2 个答案: