顯示D行內嵌其中包含P塊

我想div.div-block和p.div-p保持其默認display:block，但是，div-inline爲display:inline。期望的結果是三個水平的div's，每個具有多個垂直堆疊的p's塊。顯示D行內嵌其中包含P塊

我試過div.div-block div {display:inline;}，但div.div-inline仍然是垂直放置的。當我添加div.div-block div p {display:inline;}時，div's是水平的，但p's也是水平的。

<div class="div-block"> 
    <div class="div-inline"> 
     <p class="p-block">Bla bla bla</p> 
     <p class="p-block">Bla bla bla</p> 
    </div> 
    <div class="div-inline"> 
     <p class="p-block">Bla bla bla</p> 
     <p class="p-block">Bla bla bla</p> 
     <p class="p-block">Bla bla bla</p> 
     <p class="p-block">Bla bla bla</p> 
    </div> 
    <div class="div-inline"> 
     <p class="p-block">Bla bla bla</p> 
    </div> 
</div>

來源

2014-03-13 user1032531

所以[**這**]（http://jsfiddle.net/a6fAx/）？或者像[** this **]（http://jsfiddle.net/a6fAx/1/） – Ruddy

@Ruddy。是。難以區分'display：block'和'display：inline-block'之間的區別 – user1032531

請看[** MSDN **]（http://msdn.microsoft.com/zh-cn/library/即/ ms530751（v = vs.85）的.aspx）。您將能夠在任何時候分辨不同的情況！ – Ruddy

您需要使用display: inline-block一組寬度。寬度很重要，因爲當你的內容增長過去「bla bla bla」時，你會遇到包裝問題。另外，需要vertical-align: top來定位頂部的文本。

.div-inline { 
    display: inline-block; 
    width: 33%; 
    vertical-align: top; }

此外，如果你關心IE7兼容性，你需要一些IE7黑客。我通常使用IE7的兼容性如下：

.div-inline { 
    display: inline-block; 
    *display: inline; // IE7 
    *zoom: 1;   // IE7 
    width: 33%; 
    vertical-align: top; }

這裏是一個JSFiddle

來源

2014-03-13 14:22:41 chadiusvt

你在找什麼可能是inline-block。如果你讓你的.div-inline職業有div.div-inline {display:inline-block;}，他們將相鄰排列。當然，包裝仍然有效，所以如果div從頁面上掉下來，它仍然包裝整個塊。

來源

2014-03-13 14:20:06 Joeytje50

您所需要的只是浮動到您正在討論的內聯div。

.div-inline{ 
    float : left; 
    width:33%; 
} 

.clear{ 
    clear:both; 
}

您必須照顧clearfix，以便連續流動下一個內容到新塊。您還需要根據所需列數設置寬度。這裏工作的小提琴清晰的修復和寬度。

http://jsfiddle.net/kXpX2/3/

來源

2014-03-13 14:21:15 Vishwanath

確保你清除你的花車，如果你需要像往常一樣繼續顯示內容http://jsfiddle.net/kXpX2/1/ –

這會遇到'p'內容增長時的問題。請參閱http://jsfiddle.net/kXpX2/2/ – chadiusvt

感謝@UptownApps的明確修復。 – Vishwanath

顯示D行內嵌其中包含P塊

回答

相關問題