造型並排div塊，讓他們留在行

我已經設計了這些顏色塊。

如果div內的所有文本都適合兩行，那麼它工作正常。但是，如果一個溢出到另一行，整個div上移一行。如何在保持相同的div寬度並使文本流入下面的行中時阻止這種情況發生

我已經在文本中使用了斷點以確保文本在一行上合適時仍保持間隔，但我顯然需要刪除這個我假設。

#main { 
 
    margin-top:15vw; 
 
    margin-left:5vw; 
 
    margin-right:5vw; 
 
    padding-right:3vw; 
 
    padding-left:3vw; 
 
    font-family:'Hind', sans-serif; 
 
    color:black; 
 
    text-align:center; 
 
    position:relative; 
 
    font-size:2vw; 
 
    z-index: 2; 
 
    background-color:white; 
 
} 
 

 
#green{ 
 
    background-color: #f0f0df; 
 
    display: inline-block; 
 
    margin:1vw; 
 
    height: 8vw; 
 
    width: 12vw; 
 
    line-height: 3vw; 
 
    border-radius: 0.5vw; 
 
}

<div id=main> 
 

 
<div id=green>Title 1<br><b>Answer 1</b></div><div id=green>Title 2 (long title)<br><b>Answer 2</b></div><div id=green>Title 3<br><b>Answer 3</b></div><p id="rep">Additional text goes here. This text needs to be here but is not important and so does not need a box of its own. It is styled with italics and smaller font, and will probably be ignored.</p> 
 
    
 
</div>

來源

2016-02-22 J. Ayo

你說你的DIV與表，但我沒有看到它在你的代碼塊。 –

它是一個腳本源表，並且我不認爲有必要將所有代碼添加到 –

中，如果你的表在塊中，那麼你可以將'td'設置爲' ' –

給vertical-align: top;到#green

#main { 
 
    margin-top:15vw; 
 
    margin-left:5vw; 
 
    margin-right:5vw; 
 
    padding-right:3vw; 
 
    padding-left:3vw; 
 
    font-family:'Hind', sans-serif; 
 
    color:black; 
 
    text-align:center; 
 
    position:relative; 
 
    font-size:2vw; 
 
    z-index: 2; 
 
    background-color:white; 
 
} 
 

 
#green{ 
 
    background-color: #f0f0df; 
 
    display: inline-block; 
 
    margin:1vw; 
 
    height: 8vw; 
 
    width: 12vw; 
 
    line-height: 3vw; 
 
    border-radius: 0.5vw; 
 
    vertical-align: top; 
 
}

<div id=main> 
 

 
<div id=green>Title 1<br><b>Answer 1</b></div><div id=green>Title 2 (long title)<br><b>Answer 2</b></div><div id=green>Title 3<br><b>Answer 3</b></div><p id="rep">Additional text goes here. This text needs to be here but is not important and so does not need a box of its own. It is styled with italics and smaller font, and will probably be ignored.</p> 
 
    
 
</div>

來源

2016-02-22 11:47:54 ketan

謝謝。我確信我嘗試了這一點，但當時也許我有其他一些造型覆蓋它。現在正常工作 –

@ J.Ayo很樂意幫忙。不要忘記標記爲答案。 – ketan

我會......當它讓我在11秒內！ –

造型並排div塊，讓他們留在行

回答

相關問題