Question

我正在尝试添加图像作为背景，我需要在两者上写文字。我面临的问题是两个图像的间隙b / w。我不知道为什么它会给我带来差距。

<div class='imgcontainer'>
    <div id="first"> <h4 > SYRIAN CRISIS </h4>
        <p > We are organizing a conference in April 2016 on
            water and humanitarian aspects of the Syrian crisis.
            Click <a href="projectc.html">here</a> to learn about the crisis and our
            conference.</p></div>
    <div id="second"><h2>SMALLHOLDER</h2><h3> AGRICULTURE</h3>
        <p>We are organizing a workshop in April 2016 on smallholder irrigation in Sub-Saharan Africa. Click here
            to learn about the challenge of agriculture in the
            region and our workshop.</p>
    </div>
    <div id="clear"></div>
</div>






#first {
    width: 680px;
    background: url('../images/banner-img1.jpg');
    float: left;
    background-repeat: no-repeat;
    height: 440px;
    margin: auto;
}
#second {
    width: 650px;
    float: right;
    background: url('../images/banner-img2.jpg');
    height: 440px;
    margin: auto;
    background-repeat: no-repeat;

}

Answer 1

我认为您的广告屏幕宽于680px + 650px = 1330px

第一个div与左侧对齐，第二个与右侧对齐，两者都有固定的宽度..如果您的浏览器宽度为> 1330px你在这些div之间有差距

Answer 2

DEMO

CSS：

.imgcontainer {
  position: relative;
}

.right,
.left {
  width: 50%;
  position: absolute;
}

.right {
  right: 0;
}

.left {
  left: 0;
}

#first {
  width: 50%;
  position: absolute;
  background: url('../images/banner-img1.jpg');
  left: 0;
}

#second {
  width: 50%;
  position: absolute;
  background: url('../images/banner-img2.jpg');
  right: 0;
}

HTML：

<div class='imgcontainer'>
  <div id="first">
    <h4> SYRIAN CRISIS </h4>
    <p> We are organizing a conference in April 2016 on water and humanitarian aspects of the Syrian crisis. Click <a href="projectc.html">here</a> to learn about the crisis and our conference.
    </p>
  </div>
  <div id="second">
    <h2>SMALLHOLDER</h2>
    <h3> AGRICULTURE</h3>
    <p>We are organizing a workshop in April 2016 on smallholder irrigation in Sub-Saharan Africa. Click here to learn about the challenge of agriculture in the region and our workshop.</p>
  </div>
  <div id="clear"></div>
</div>

两个图像并排，文字在上面

2 个答案: