如何僅使用CSS創建3列布局？

Question

我正在嘗試解決以下問題：頁面的內容部分具有三列，但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;
}

使用上面的代碼，貸款人DIV位於借款人DIV的正下方，而不是位於借款人和經銷商之間的中間。 我該如何糾正？

Answer 1

請添加“ float：left;” 在您的投資者編號中。 CSS是

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

謝謝

Answer 2

您需要為每個div元素使用float：left而不是float：right。 除非您希望其中一個元素與其他兩個元素分開放置。 如果要在div元素之間添加間距，請使用margin-left。

http://jsfiddle.net/TxD6V/