在CSS中如何顯示多個div？

Question

在我的項目，我想顯示的文字像如下： -

Title 
Name Date 
details 

但我得到： -

Title 
Namedetails 
    Date 

這裏是我的jsfiddle鏈接： - jsfiddle

我在哪裏有問題？

Answer 1

這是一個fiddle查看結果。

這裏是我的變化：

.A > div{ 
    margin-right: 5px; 
} 

#title{ 
    font-size: 100%; 
} 
#details{ 
    font-size:100%; 
    float: left; 
    clear: both; 
    display: inline-block; 
} 

#block1 { 
    float: left; 
    display: block; 

} 

#block2 { 
    float: left; 
    clear: right; 
} 

您已經添加#title兩次，我details這裏替換它，並添加CSS規則上面：

<div id= "details"> 
    <a>details</a> 
</div> 

而對於一個建議，使用一般的CSS規則您將多個元素應用於單個類並將該類添加到所有元素。不要重複css規則。

Answer 2

好的，當您已經將float: left添加到同一元素時，沒有必要添加clear: left。相反，添加clear: both到#title所以它會在所有元素的底部堆：

#title { 
    font-size: 100%; 
    clear: both; 
} 
#block1 { 
    float: left; 
    display: block; 
} 
#block2 { 
    float: left; 
    display: block; 
} 
.A { 
    position: relative; 
    margin: 40px 0; 
    height: 100px; 
    width: 200px; 
    background: #eee; 
} 
.A:after { 
    content: " "; 
    display: block; 
    background: #c00; 
    height: 29px; 
    width: 100%; 
    position: absolute; 
    bottom: -29px; 
} 

Answer 3

試試這個

.A div{ 
    padding:2px; 
} 
#title{ 
    font-size:100%; 
} 

#block1 { 
    float: left; 
    display: inline-block; 

} 

#block2 { 

display: inline-block; 
clear:left; 
} 
.A { 
    position: relative; 
    margin: 40px 0; 
    height: 100px; 
    width: 200px; 
    background: #eee; 
} 

.A:after { 
    content: " "; 
    display: block; 
    background: #c00; 
    height: 29px; 
    width: 100%; 
    position: absolute; 
    bottom: -29px; 
} 

Demo Here

OR

我簡化了你的CSS代碼。

使用此

#title{ 
    font-size:100%; 
} 

#block1 , #block2{ 

    display: inline-block; 

} 


.A { 
    position: relative; 
    margin: 40px 0; 
    height: 100px; 
    width: 200px; 
    background: #eee; 
} 

.A:after { 
    content: " "; 
    display: block; 
    background: #c00; 
    height: 29px; 
    width: 100%; 
    position: absolute; 
    bottom: -29px; 
} 

Demo Here