如何让div彼此下方答案

【问题标题】：How to get divs to go under each other如何让div彼此下方
【发布时间】：2014-10-07 17:21:49
【问题描述】：

我对两个按钮使用相同的 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，但它没有改变。当我在第一个 div 之后添加 <br /> 时，第二个会下降 100px 因为我旁边有一些图像。

【问题讨论】：

位置取决于容器的大小。如果您想将它们一个接一个地放置，则容器必须与按钮 div 的大小相同。
你正在使用 float:right; （1.删除它 2.寻找替代品 3.??? 4.利润
你能发Fiddle 让我们看到问题吗？

标签： html css

【解决方案1】：

您可以在链接周围创建一个包装器（请参阅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;
}

【讨论】：

【解决方案2】：

只需添加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
}

【讨论】：

【解决方案3】：

您可以通过添加一个将它们推入堆栈：

clear: both;

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

更多关于清除属性的信息：http://www.w3schools.com/cssref/pr_class_clear.asp

【讨论】：

【解决方案4】：

试试这个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;
}

【讨论】：

【解决方案5】：

如果您想在它们下方有两个按钮，并且如果它们位于页面右侧，则您需要创建另一个容器。这个新容器应该有一个浮动：对。按钮不应浮动，因为它们设置在一行中。

【讨论】：