Question

我想和我的3个div并排。第二个div（中间的一个）将是10％，所以左右div之间有空格。我将左右div设置为45％。我做错了什么？

这是我的傻瓜： http://jsfiddle.net/huskydawgs/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 -->

Fiddle

Answer 2

我知道css对你来说可能更直观但是在这种情况下我绝对建议你使用html bat只需要制作一个包含1行和3列的表。

你可以在css中设置很多东西来定义最终结果的样子！

祝你好运：）

Answer 3

您需要从#rightcolumn中提取#centercolumn和#leftcolumn并让他们成为兄弟姐妹

＆＃13;

#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;
 }

＆＃13;

<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>

＆＃13;

无法并排浮动3个div

3 个答案: