多個內容塊

我不能讓這兩個內容相鄰顯示。我從來沒有與顯示內容這樣的任何問題之前，所以希望得到可用的任何幫助多個內容塊

HTML

<div class="block-one"> 
<h3>Block 1</h3> 
    <ol> 
     <li><a href="#" title="">One</a></li> 

    </ol> 
</div> 
<div class="clear-div"></div> 

<div class="block-two"> 

<div class="block-two-title">Block 2</div> 
<div class="thumb-title"> 
    <a href="#"><img src="images/example.jpg" width=155 height=130 /></a> 
    <h4>Title</h4> 
    <p>Description</p> 
</div> 

<div class="thumb-title"> 
    <a href="#"><img src="images/example.jpg"width=155 height=130 /></a> 
    <h4>Title</h4> 
    <p>Description</p> 
</div> 

<div class="thumb-title"> 
    <a href="#"><img src="images/example.jpg"width=155 height=130 /></a> 
    <h4>Title</h4> 
    <p>Description</p> 
</div>

CSS

.popular-games { float:left } 

.latest-screenshots img{ display:inline-block} 

.thumb-title{display: inline-block}`

來源

2013-07-06 Johnny Hankgard

你能扔它在小提琴上？ –

或者你如何看待它的截圖？另外，'html'標籤定義也會派上用場。 –

@JorgeFuentesGonzález有什麼問題？有很多東西是其他東西旁邊：http://jsfiddle.net/aMLQy/ –

這是你的fiddle。您無法將這兩個塊顯示爲彼此相鄰，因爲您在它們之間有一個清除div。如果你刪除它，浮兩個塊，你會得到期望的結果，如here

<div class="block-one"> 
<h3>Block 1</h3> 
    <ol> 
     <li><a href="#" title="">One</a></li> 

    </ol> 
</div> 
<!-- remove this one <div class="clear-div"></div> --> 

<div class="block-two"> 
[…]

來源

2013-07-06 20:35:36

只需添加這些CSS規則：

html, body { height: 100%; } 

body > div { 
    float: left; 
}

這裏是的jsfiddle：DEMO

來源

2013-07-06 20:36:04 leoMestizo

回答

相關問題