html - 如何使div不占用水平空间

Question

我在顶部有一个 div。

< div class="ad-top">
    < img class="adtop" src="images.jpg" height="90" width="728"/>
< /div>

我试过下面这段代码

.ad-top{
padding: 0;
height: 90px;
width: 728px;
margin:0px 100px 0px 100px;
border: 1px solid black;
float: left;
}

但它仍然向右占用水平空间并将右下方的广告推送。如何解决？

右边是广告代码

div.ad-right{
height: 600px;
width: 300px;
margin-right: 50px;
float: right;
}

这是该部分的代码。 (注意 = 广告的 div 不是该部分的子项。)

section{
    padding-left: 50px;
    display: inline-block;
}

section div{
    width: 900px;
}

section div p{
    text-align: left;
    padding-bottom: 50px;
}

Answer 1

你好，现在 remove float left 到你的 class .ad-top并添加 display:inline-block; 和vertical-align:top; 并定义你的img 标记 vertical-align:top 像这样 .

.ad-top{
float:none;
border: solid 1px black;
display:inline-block;vertical-align:top;
}
.ad-top img{
    vertical-align:top;
}

演示代码为

div.ad-right{
height: 600px;
width: 300px;
margin-right: 50px;
float: right;
}.ad-top{
padding: 0;
height: 90px;
width: 728px;
margin:0px 100px 0px 100px;
border: solid 1px black;
display:inline-block;vertical-align:top;
}
.ad-top img{
    vertical-align:top;
}section{
    padding-left: 50px;
    display: inline-block;
}

section div{
    width: 900px;
}

section div p{
    text-align: left;
    padding-bottom: 50px;
}

<div class="ad-top">
    <img class="adtop" src="https://www.gravatar.com/avatar/9b4f9deed7c1533d605bc3efb42e3604?s=32&d=identicon&r=PG&f=1" height="90" width="728"/>
</div>