Question

我对两个按钮使用相同的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下降，因为我旁边有一些图像。

Answer 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;
}

Answer 2

只需添加clear:both DEMO

即可

.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
}

Answer 3

您可以通过添加：

将它们推送到堆栈

clear: both;

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

有关透明属性的更多信息：http://www.w3schools.com/cssref/pr_class_clear.asp

Answer 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;
}

Answer 5

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

如何让divs相互影响

5 个答案: