Question

我正在做一个前端项目，在其中创建了一个“关于我们”部分，其中包含一些文字和图像。

正如您所看到的，我要去除的图像下面有一个小的白色缝隙。我尝试调整div元素的margin，padding，height和图片，但是我肯定缺少了一些东西

我的代码：

#about-container{
    width:100%;
    height:auto;
    background-color: white;
    position: relative;
    margin:0;
    display:flex;
}

#about-container div{
    margin:0;
    padding:0;
    height:auto;
}

#desc{
    width:30%;
    background-color:green;
}
  
#desc ul{
    list-style-type: none;
    margin:0;
    padding:0;
}
  
#desc li{
    padding:10px;
}

#about-img{
    width:70%;
}

#about-img img{
    width:100%;
    height:500px;
}

<div id="about-container">
      <div id="desc">
        <h1> Our values </h1>
        <ul>
          <li>We care about our customer needs </li>
          <li>We focus on the quality of our products & services offered </li>
          <li>We invest in innovation and sustainable development </li>
          <li>We care about the needs of society and vulnerable social groups</li>
        </ul>
      </div>

      <div id="about-img">
            <img src="IMAGES/about-img.jpg">
      </div>

    </div>

感谢您在此小任务中的帮助。

Answer 1

您可以使用以下CSS代码对齐它们：

#about-img img {
  width: 100%;
  height: 500px;
  vertical-align: bottom;
}

Answer 2

将vertical-align: top;添加到图像。或直接在图像中添加diaplay: block

#about-container{
    width:100%;
    height:auto;
    background-color: white;
    position: relative;
    margin:0;
    display:flex;
}

#about-container div{
    margin:0;
    padding:0;
    height:auto;
}

#desc{
    width:30%;
    background-color:green;
}
  
#desc ul{
    list-style-type: none;
    margin:0;
    padding:0;
}
  
#desc li{
    padding:10px;
}

#about-img{
    width:70%;
}

#about-img img{
    width:100%;
    height:500px;
    vertical-align: top;
}

<div id="about-container">
  <div id="desc">
    <h1> Our values </h1>
    <ul>
      <li>We care about our customer needs </li>
      <li>We focus on the quality of our products & services offered </li>
      <li>We invest in innovation and sustainable development </li>
      <li>We care about the needs of society and vulnerable social groups</li>
    </ul>
  </div>

  <div id="about-img">
        <img src="https://www.w3schools.com/bootstrap/sanfran.jpg">
  </div>

</div>

Answer 3

解决方案：

#about-container div{
    margin:0;
    padding:0;
    height: 500px;
}


#about-img img{
    width:100%;
    height:100%;
}

消除div元素内图像的间隙

3 个答案: