對齊不等於float引起的？

試圖創建3列沒有響應。但遇到了一個奇怪的對齊問題。對齊不等於float引起的？

#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*/

<div id="DIV_1"> 
 
\t <div id="DIV_2"> 
 
\t \t <div id="DIV_3"> 
 
\t \t \t <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> 
 
\t \t </div><img src="img/search/depart-return-mid-arrow.jpg" id="IMG_8" alt='' /> 
 
\t \t <div id="DIV_9"> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t \t <div id="DIV_14"> 
 
\t \t </div> 
 
\t </div> 
 
</div>

任何想法，爲什麼文本的對齊不等於？ float的右側文字：right元素高於左側的。

來源

2016-06-14 Jessie Campbell

我只看到正確的文字在小提琴... – Roysh

@Roysh你是什麼意思？嘗試去全屏你會看到正確的文字高於左邊的一個。 –

我現在看到它。幾個問題 - 爲什麼你使用'float：right;'？有必要嗎？不好看。另外，你想在一行中的「ALOR SETAR」？或者兩個像現在一樣？ – Roysh

您在#DIV_9

此默認行爲上#DIV_3

和padding: 10px 0px 0px;使用padding: 15px 0px 0px;，你有兩個不同的補白，你必須使它相同墊對他們倆的

來源

2016-06-14 06:47:43

我不會這樣做，但我認爲這是你想要的

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

來源

2016-06-14 06:48:46 Roysh

對齊不等於float引起的？

回答

相關問題