Question

为什么我的<div class="contactvlak">无法识别横幅广告，只是过去了，而不是像<div class="middentextvlak">那样？我知道margin-top将是一个解决方案，但这不是很干净。

HTML：

</div>
    <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.
            Een rijopleiding met oog voor detail. U en uw behoefte staan hierbij steeds centraal.
            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">
        <h1>Contactgegevens</h1>
        <p><b>Autorijschool NRV</b>
        <br>Grasplein 2
        <br>06-21710000
        <br>info@autorijschoolNRV.nl
        <br>55.18.77.391 ABN Amro
    </div>

的CSS：

html, body
{
    background-image:url('images/background.jpg');
    background-repeat: no-repeat;
    height: 100%;
    margin: 0 0 0 0;
}


.banner
{
    width: 100%;
    top: 0;
    left: 0;
    margin-bottom: -5px;
    position: relative; 


}


.cssmenu
{
    float:left;
    top: 0;
    left: 0;
    background-color:black;
    width: 100%;
    height: 6%;

}

.cssmenu ul
{
    list-style-type:none;
    text-align: center;
    margin-right: 6%;

}

.cssmenu li
{
    display:inline; 
    padding-left: 5%;

}

.cssmenu li a
{
    color: white;
    text-decoration: none;
    font-family:Eras Bold ITC;
    font-size: 20px;

}

.cssmenu li a:hover
{
    color: #0671ca;
    text-decoration: none;
    font-family:Eras Bold ITC;
    font-size: 20px;
}


.middentextvak
{
    clear:both;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 43%;
    height: 35%;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 7%;
}


.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-top: 5%;
    margin-left: 15%;
    margin-right: auto;
    width:70%;
    z-index: 0;
    opacity:0.5;
    clear: both;
}

.contactvlak
{
    clear:both; 
    width: 23%;
    height: 35%;
    background: white;
    position:absolute;
    top:0;
    right:0;
    background: rgba(255, 255, 255, 0.5);
}

.contactvlak h1
{
    padding-top: 0;
    padding-left: 10%;
    font-family:Arial;
    color: #0671ca;
    font-size: 23px;
}

.contactvlak p
{
    padding-left: 10%;
    font-family:Arial;
    margin-top: -2%;
}

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

Answer 1

班级contactvlak使用绝对定位，因此无论如何都位于右上角。 clear:both对absosutely定位元素没有影响。

.contactvlak
{
    clear:both; 
    width: 23%;
    height: 35%;
    background: white;
    position:absolute;
    top:0;
    right:0;
    background: rgba(255, 255, 255, 0.5);
}

要将其整合到常规页面流中，请移除position:absolute;，top:0;，right:0;

为什么我的div不承认我的旗帜？

1 个答案: