html - 如何让div彼此相交

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 但它没有改变。当我添加 <br />在第一个 div 之后，第二个 div 下降 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;
}