浮动引起的对齐不相等？

时间：2016-06-14 06:34:03

标签： html css css3

试图在没有响应的情况下创建3列。但是有一个奇怪的对齐问题。

Open Graph actions and objects

＆＃13;
＆＃13; 
#DIV_1 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    height: 83.2px;
    text-align: center;
    width: 1522.4px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 761.2px 41.6px;
    transform-origin: 761.2px 41.6px;
    background: rgb(67, 82, 85) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_1*/

#DIV_2 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    height: 83.2px;
    text-align: center;
    width: 800px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 250px 41.6px;
    transform-origin: 250px 41.6px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    margin: 0px 511.2px;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_2*/

#DIV_3 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    float: left;
    height: 59.8px;
    text-align: left;
    width: 155.075px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 77.5375px 29.9px;
    transform-origin: 77.5375px 29.9px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
    padding: 15px 0px 0px;
}/*#DIV_3*/

#SPAN_4 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    text-align: left;
    column-rule-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal bold normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_4*/

#BR_5, #SPAN_7 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    text-align: left;
    column-rule-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#BR_5, #SPAN_7*/

#IMG_6 {
    bottom: 1px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    height: 16px;
    left: 0px;
    position: relative;
    right: 0px;
    text-align: left;
    top: -1px;
    vertical-align: middle;
    width: 15px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 7.5px 8px;
    transform-origin: 7.5px 8px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#IMG_6*/

#IMG_8 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    height: 83px;
    text-align: center;
    vertical-align: middle;
    width: 59px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 29.5px 41.5px;
    transform-origin: 29.5px 41.5px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#IMG_8*/

#DIV_9 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    float: right;
    height: 54.8px;
    text-align: right;
    width: 155.075px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 77.5375px 27.4px;
    transform-origin: 77.5375px 27.4px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
    padding: 10px 0px 0px;
}/*#DIV_9*/

#SPAN_10 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: block;
    float: right;
    height: 22.4px;
    text-align: right;
    width: 93.2875px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 46.6375px 11.2px;
    transform-origin: 46.6375px 11.2px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal bold normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_10*/

#BR_11, #SPAN_13 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    text-align: right;
    column-rule-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#BR_11, #SPAN_13*/

#IMG_12 {
    bottom: 1px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    height: 16px;
    left: 0px;
    position: relative;
    right: 0px;
    text-align: right;
    top: -1px;
    vertical-align: middle;
    width: 15px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 7.5px 8px;
    transform-origin: 7.5px 8px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#IMG_12*/

#DIV_14 {
    box-sizing: border-box;
    clear: both;
    color: rgb(255, 255, 255);
    text-align: center;
    width: 500px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 250px 0px;
    transform-origin: 250px 0px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_14*/
＆＃13; 
<div id="DIV_1">
	<div id="DIV_2">
		<div id="DIV_3">
			 <span id="SPAN_4">KUALA LUMPUR</span><br id="BR_5" /><img src="img/search/return-depart-calendar.jpg" alt="" id="IMG_6" /> <span id="SPAN_7">10th October 2016</span>
		</div><img src="img/search/depart-return-mid-arrow.jpg" id="IMG_8" alt='' />
		<div id="DIV_9">
			 <span id="SPAN_10">ALOR SETAR</span><br id="BR_11" /><img src="img/search/return-depart-calendar.jpg" alt="" id="IMG_12" /> <span id="SPAN_13">10th October 2016</span>
		</div>
		<div id="DIV_14">
		</div>
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

知道为什么文本的对齐不相等？ 右侧文本浮动：右侧元素高于左侧。

2 个答案:

答案 0 :(得分：0)

您在padding: 15px 0px 0px;

上使用#DIV_3 在padding: 10px 0px 0px;

上

和#DIV_9

这个默认行为因为你有两个不同的填充，你必须为它们两个做同样的填充

答案 1 :(得分：0)

我不会这样做，但我认为这就是你想要的

#DIV_9 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    float: right;
    height: 54.8px;
    text-align: right;
    width: 155.075px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 77.5375px 27.4px;
    transform-origin: 77.5375px 27.4px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
    padding: 15px 0px 0px;
}
#SPAN_10 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: block;
    float: right;
    height: 22.4px;
    text-align: right;
    width: 114.2875px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 46.6375px 11.2px;
    transform-origin: 46.6375px 11.2px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal bold normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}
#IMG_12 {
    bottom: 1px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    height: 16px;
    left: 0px;
    position: relative;
    right: 0px;
    text-align: right;
    top: -1px;
    vertical-align: middle;
    width: 15px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 7.5px 8px;
    transform-origin: 7.5px 8px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
    float: left;
}

请参阅小提琴http://jsfiddle.net/z5mgqk6s/1/

相关问题
最新问题