Question

我想要class =“contactvlak”来接近class =“middentextvak”，我尝试了许多改变位置等的东西，但它似乎根本不起作用。如果这听起来像是一个非常愚蠢的问题，我很抱歉。

<div class="midden">
    <img class="logo" src="images/logo.png">
    <div class="middentextvak">
        <h1>Welkom bij autorijschool NRV! </h1>
        <p>In Veldhoven en omgevingen verzorgen wij uw complete rijopleiding in onze volkswagen.
            <br>Een rijopleiding met oog voor detail. U en uw behoefte staan hierbij steeds centraal.
            <br>Onze ervaren instructeur geeft u een moderne rijopleiding geheel afgestemd op uw aanvangsniveau. Zo ben u altijd verzekerd van het zo mogelijk behalen van uw rijbewijs tegen een zo laag mogelijke prijs.
            <br>
            <br>
            Klik <a href="http://www.rijschoolgegevens.nl/index.asp?pageid=2&examenplaats=75&rijschoolid=5285&fromsearch=1">hier</a> voor de meest recente slagingspercentage.
        </p>
    </div>
    <div class="contactvlak"></div> 
</div>

的CSS：

.midden
{
    clear:both;
    width: 100%;
    height: 400px;

}
.middentextvak
{

    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 43%;
    height: 50%;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 7%;

}

.contactvlak
{
    width: 100px;
    height: 100px;
    background: white;

}

.middentextvak h1
{
    padding-top: 2%;
    padding-left: 5%;
    font-family:Arial;
    color: #0671ca;
    font-size: 23px;
}

.middentextvak p
{
    padding-left: 5%;
    font-family:Arial;
    margin-top: -2%;
}
.logo
{
    position: absolute;
    display: block;
    margin-left: 15%;
    margin-right: auto;
    width:70%;
    z-index: 0;
    opacity:0.5;
    clear: both;
}

Jfiddle：http://jsfiddle.net/H5LmF/9/

编辑：抱歉发布错误的小提琴！

Answer 1

将position:relative添加到.midden，将position:absolute和top:0添加到.contactvlak。

<强> jsFiddle example

Answer 2

班级middentextvak和contactvlak是班级midden的孩子。正确？

因此，将display: inline; position: relative属性添加到midden类，您将获得两个div并排。

我不能在另一个旁边得到一个div

2 个答案: