如何仅使用 CSS 创建 3 列布局？答案

【问题标题】：How to Create 3 Column Layout with CSS Only?如何仅使用 CSS 创建 3 列布局？
【发布时间】：2012-01-24 05:34:06
【问题描述】：

我正在尝试纠正我的页面内容部分包含三列但 DIV 未正确浮动的问题。这是我的 HTML：

<div id="content">
    <asp:ContentPlaceHolder ID="MainContent" runat="server">

    </asp:ContentPlaceHolder>
</div>        

<div class="columns">
    <div id="borrower">
    </div>
    <div id="dealer">
    </div>
    <div id="investor">
    </div>

</div>
<div class="footer">

</div>

这是我的 CSS：

body{
font-family:Verdana, Geneva, sans-serif;
font-size: 10px;
width:100%;
height: 100%;
}
#content
{
background-image: url('../Images/background_03.jpg');
background-repeat: no-repeat;
width: 1150px;
height: 399px;
}
#borrower
{
background-image: url('../Images/Borrower.jpg');
background-repeat: no-repeat;
width: 371px;
height: 248px;
float: left;
}
#investor
{
background-image: url('../Images/Lender.jpg');
background-repeat: no-repeat;
width: 371px;
height: 248px;
}
#dealer
{
background-image: url('../Images/dealer.jpg');
background-repeat: no-repeat;
width: 371px;
height:248px;
float: right;
}
#footer
{
clear:both;
}

使用上面的代码，Lender DIV 直接位于 Borrower DIV 下方，而不是位于 Borrower 和 Dealer 之间。我该如何纠正这个问题？

【问题讨论】：

标签： html css xhtml css-float

【解决方案1】：

您需要为每个 div 元素使用 float:left 而不是 float:right。除非您希望您的元素之一远离其他两个元素。如果要在 div 元素之间添加间距，请使用 margin-left。

http://jsfiddle.net/TxD6V/

【讨论】：

我更改了所有 3 个的浮动属性，现在 Borrower 在最左边，Dealer 在 Borrower 旁边，Lender 在 Borrower 下面。
@SidC 元素有足够的空间，还是它们的父容器太小而无法将所有三个元素放在一行上？

【解决方案2】：

请添加“float:left;”在您的投资者 ID 中。 CSS是

#investor
{
background-image: url('../Images/Lender.jpg');
background-repeat: no-repeat;
width: 371px;
height: 248px; float:left;
}

谢谢

【讨论】：