如何讓div下彼此

即時通訊使用兩個按鈕相同的div類，但他們彼此相鄰而不是彼此相鄰。如何讓div下彼此

我的CSS是

.viewproj { 
background-color: rgb(200,200,200); 
padding: 0.6% 0.3% 0.8% 1.3%; 
width: 160px; 
border-radius: 3px; 
float: right; 
}

我的HTML是

<a class="proj" href="Habbogold/habbogoldlivedemo.html"> 
<div class="viewproj">View Live Demo</div></a> 

<a class="proj" href="purchase.php"> 
<div class="viewproj">Purchase</div></a>

我已經嘗試添加display: block;和display: list-item;到CSS，但它不會改變。當我在第一格之後加上<br />時，第二格下降了100px，因爲我旁邊有一些圖像。

來源

2014-10-07 Croaked

放置取決於容器的大小。如果你想一個接一個放置它們，那麼容器的大小應該是按鈕div的大小。 – emmanuel 2014-10-07 09:03:56

你正在使用float：right; （1.remove it 2.找到替代品3. 4.profit – Gho 2014-10-07 09:04:07

你能製作一個[Fiddle]（http://jsfiddle.net），我們可以看到這個問題嗎？ – Banana 2014-10-07 09:04:56

你可以把他們加一個疊放：

clear: both;

例子：http://jsfiddle.net/6up80xje/

有關clear屬性的詳細信息：http://www.w3schools.com/cssref/pr_class_clear.asp

來源

2014-10-07 09:07:14 JRW

您可以創建一個在你的鏈接的包裝（見http://jsfiddle.net/cx7bqa37/）

HTML

<div class="example_wrapper"> 
    <a class="proj" href="Habbogold/habbogoldlivedemo.html"> 
     <div class="viewproj">View Live Demo</div> 
    </a> 

    <a class="proj" href="purchase.php"> 
     <div class="viewproj">Purchase</div> 
    </a> 
</div>

CSS：

.viewproj { 
    background-color: rgb(200,200,200); 
    padding: 0.6% 0.3% 0.8% 1.3%; 
    width: 160px; 
    border-radius: 3px; 
} 

.example_wrapper { 
    float: right; 
}

來源

2014-10-07 09:06:00 Matthias

只需添加clear:bothDEMO

.viewproj { 
background-color: rgb(200,200,200); 
padding: 0.6% 0.3% 0.8% 1.3%; 
width: 160px; 
border-radius: 3px; 
float: right; 
clear:both 
}

來源

2014-10-07 09:07:23

試試這個DEMO

.viewproj { 
background-color: rgb(200,200,200); 
padding: 0.6% 0.3% 0.8% 1.3%; 
width: 160px; 
border-radius: 3px; 
    margin-top: 10px; 
float: right; 

} 
.viewproj:first-child { 
    clear:both; 
}

來源

2014-10-07 09:07:38

，如果你想擁有它們下面兩個按鈕和如果它們位於頁面的右側，則需要創建另一個容器。這個新容器應該有一個float：right。按鈕不應該浮動，因爲它們設置在一行中。

來源

2014-10-07 09:14:20 Tomasz

如何讓div下彼此

回答

相關問題