无法让3个div并排浮动

Question

我想让3个div并排。 第二个div（中间一个）为10％，因此左右div之间有空间。 我将左右div设置为45％。 我究竟做错了什么？

这是我的jsfiddle： http : //jsfiddle.net/hus​​kydawgs/sukcv46p/22/

这是我的HTML：

    <div id="wrapper-segmentation">
    <div id="leftcolumn">
    <div class="wrapper-promo">
        <div class="title-top">
            <h2 class="block-title">
                Three states or less</h2>
        </div>
        <div class="promo-content">
            <p>Bid and RFP Notification Only</p>
        <p>Online and email support</p>
            <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
        </div>
    </div>
    <div id="centercolumn">
        Center
    </div>
    <div id="rightcolumn">
    <div class="wrapper-promo">
        <div class="title-top">
            <h2 class="block-title">
                National or Regional</h2>
        </div>
        <div class="promo-content">
            <p>Bid and RFP Notification Only</p>
        <p>Online and email support</p>
            <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
    </div>
</div>

这是我的CSS：

#wrapper-segmentation {
     width: 100%;
     margin: 0 auto;
}

#leftcolumn, #rightcolumn, #centercolumn {
    float: left;
    color: white;
    text-align: center;
}

.segmentation-left {
    background-color: #e2e3e4;
    width: 100%;
}

#leftcolumn {
     border: 1px #f66511;
     width: 45%;
     background-color: #e2e3e4;
}

#centercolumn {
     width: 10%;
     background-color: #ffffff;
}

#rightcolumn {
     width: 45%;
     background-color: #e2e3e4;
}

.wrapper-promo {
    background-color: #e2e3e4;
    width: 100%;
}

.title-top {
    background-color: #2251a4;
    height: 40px;  
    line-height: 40px;
}


.title-top-cell {
    display: table-cell;
    vertical-align: middle;
}


.promo-content {
    margin: 20px;
    padding: 0 0 10px 0;
}

h2 {
    font-family:Arial,sans-serif;
    font-size:19px;
    font-weight: bold;
    color:#fff;
    margin: 10px 0 -10px 0;
    text-transform:none;
}

    h2.block-title {
        font-size:22px;
        margin: 0;
        text-align: center;
        text-transform:none;
    }

    .promo-content p {
    font-family: Arial,sans-serif;
    font-size: 14px;
    color: #232323;
    line-height: 20px;
    text-align: center;
 }

Answer 1

您缺少div的结束标记：

<div class="wrapper-promo">
    <div class="title-top">
        <h2 class="block-title">
            Three states or less</h2>
    </div>
    <div class="promo-content">
        <p>Bid and RFP Notification Only</p>
    <p>Online and email support</p>
        <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
    </div>
</div><!-- This was missing -->

小提琴

Answer 2

我知道css对您来说可能更直观，但是在这种情况下，我绝对建议您使用html <tables>仅制作一个具有1行和3列的表。

您可以在CSS中设置许多内容来定义最终结果的外观！

祝好运 ：）

Answer 3

您需要从#rightcolumn中提取#rightcolumn和#centercolumn #leftcolumn它们成为同级div

 #wrapper-segmentation { width: 100%; margin: 0 auto; } #centercolumn{ color:black !important; } #leftcolumn, #rightcolumn, #centercolumn { float: left; color: white; text-align: center; } .segmentation-left { background-color: #e2e3e4; width: 100%; } #leftcolumn { border: 1px #f66511; width: 45%; background-color: #e2e3e4; } #centercolumn { width: 10%; background-color: #ffffff; } #rightcolumn { width: 45%; background-color: #e2e3e4; } .wrapper-promo { background-color: #e2e3e4; width: 100%; } .title-top { background-color: #2251a4; height: 40px; line-height: 40px; } .title-top-cell { display: table-cell; vertical-align: middle; } .promo-content { margin: 20px; padding: 0 0 10px 0; } h2 { font-family:Arial,sans-serif; font-size:19px; font-weight: bold; color:#fff; margin: 10px 0 -10px 0; text-transform:none; } h2.block-title { font-size:22px; margin: 0; text-align: center; text-transform:none; } .promo-content p { font-family: Arial,sans-serif; font-size: 14px; color: #232323; line-height: 20px; text-align: center; } 

 <div id="wrapper-segmentation"> <div id="leftcolumn"> <div class="wrapper-promo"> <div class="title-top"> <h2 class="block-title"> Three states or less</h2> </div> <div class="promo-content"> <p>Bid and RFP Notification Only</p> <p>Online and email support</p> <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p> </div> </div> </div> <div id="centercolumn"> Center </div> <div id="rightcolumn"> <div class="wrapper-promo"> <div class="title-top"> <h2 class="block-title"> National or Regional</h2> </div> <div class="promo-content"> <p>Bid and RFP Notification Only</p> <p>Online and email support</p> <p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p> </div>