對齊子div對父div的基線

0

變化

float: left;

到

display: inline-block;

float將它們視爲全部內聯對象，但inline-block給出了兩全其美的解決方案。此外，刪除vertical-align行。這可能是the most misused property in CSS。

要確定兩個框之間的間距，請確保標記本身中的div之間沒有任何空格。

來源

2014-07-20 17:38:06 rvighne

+0

謝謝。但是如果我添加一個浮點數的話，那麼該怎麼辦？事情是我需要浮動在另一邊的一個師。它立即打破了我認爲的顯示流程。 http://jsbin.com/yekezura/1/edit –

+0

@ user3740222：在這種情況下，您最好使用[絕對定位]（http://css-tricks.com/absolute-positioning-inside-相對定位/）。看來你將不得不接受另一個後續問題，因爲這不在你的問題陳述中。 – rvighne

+0

謝謝，我試了你的方式。它是最合乎邏輯的做法嗎？ http：// jsbin。com/bekezuwe/1 /編輯其實我發現這不是一個真正靈活的解決方案，因爲我必須自定義「top」屬性的值。 –

1

試試這個CSS：

.valign.bottom { 
    vertical-align: bottom; 
} 


.block { padding: 20px; display: inline-block} 

.block.red {background: red; width:50px;} 

.block.yellow {background: yellow; width:50px;} 

.block.green {background: green; width:100px;}

的問題是float: left打破顯示流動

來源

2014-07-20 17:31:32 Aguardientico

+0

謝謝。但是如果我添加一個浮點數的話，那麼該怎麼辦？事情是我需要浮動在另一邊的一個師。它立即打破了我認爲的顯示流程。 http://jsbin.com/yekezura/1/edit –

+0

然後你可以使用'position：absolute;底部：0'設置所有div放置在底部或做包裝divs來處理正確的行爲 – Aguardientico

1

我發現display: table和display:table-cell是垂直對齊div的最佳方式。我有一個example plunker here

HTML

<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
    <div class="myTable"> 
     <div class="myCell"> 
     <div class="bblock red">my bottom aligned div 1</div> 
     <div class="bblock yellow">my bottom aligned div 2</div> 
     <div class="bblock green">my bottom aligned div 3</div> 
     </div> 
    </div> 
    <br/> 
    <div class="myTable"> 
     <div class="myCell"> 
     <div class="mblock red">my middle aligned div 1</div> 
     <div class="mblock yellow">my middle aligned div 2</div> 
     <div class="mblock green">my middle aligned div 3</div> 
     </div> 
    </div> 
    <br/> 
    <div class="myTable"> 
     <div class="myCell"> 
     <div class="tblock red">my top aligned div 1</div> 
     <div class="tblock yellow">my top aligned div 2</div> 
     <div class="tblock green">my top aligned div 3</div> 
     </div> 
    </div> 
    </body> 
</html>

CSS

.myTable { 
    display:table; 
    background-color:blue; 
} 

.myCell { 
    display:table-cell; 
} 

.bblock { 
    padding:20px; 
    display:inline-block; 
    vertical-align: bottom; 
} 

.mblock { 
    padding:20px; 
    display:inline-block; 
    vertical-align: middle; 
} 

.tblock { 
    padding:20px; 
    display:inline-block; 
    vertical-align: top; 
} 

.red { 
    background-color: red; 
    width:50px; 
} 

.yellow { 
    background-color: yellow; 
} 

.green { 
    background-color: green; 
    width:100px; 
}

來源

2014-07-20 17:52:10 spsteffl

0

您可以使用display: flex;你父div來得到你想要的東西。在這裏查找文檔：CSS display Property。

要小心，因爲它只在CSS3中受支持。

來源

2014-07-20 18:05:53 tacticurv

+0

不，它似乎沒有工作。 –

+0

http://jsbin.com/takut/1/edit這不是你想要的嗎？ – tacticurv

對齊子div對父div的基線

回答

相關問題