並排的兩張圖片和上面的文字

Question

我正在嘗試添加圖像作為背景，我需要在兩者上都寫上文字。 我面臨的問題是兩幅圖像的黑白間隙。 我不知道為什么它顯示我的差距。

<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

演示

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>