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

您好删除 float left到类 .ad-top和添加 {{1 }}和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;
}

Answer 2

添加父div，如包装或容器，其中包含包含广告宽度（包括边距）的静态宽度，并且还提供边距：0 auto;为父div。

<div style="margin:0 auto;width:1278px; ">

<div class="ad-top"></div>
<div class="ad-right"></div>

</div>

Answer 3

在我看来，你的问题是你元素的顺序。因为你的＆＃34; ad-right＆＃34; div位于内容部分之后，它从相同的高度开始。

Here是一个更新版本，我已经更改了元素的顺序。

总之，现在就是这样：

Right click on your dynamic web project and click run As and Run configurations. Click the classpath and check the jar file is added there or not.

Answer 4

更新/添加以下css代码：

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

在您的代码中按照以下html结构进行操作：

<div class="container">
<div class="header"></div>

<div class="middle-container">

<div class="ad-top"></div>
<div class="ad-right"></div>
<section></section>

<footer></footer>

</div>

</div>

如何使div不占用水平空间

4 个答案: