Question

我想在info-img中添加一个div。如果我更改为<div class="box-img"><div class="info-img"></div>......</div>，则图像消失了。这情况发生了什么？如何修改CSS代码以正确显示图像？ __

* {
box-sizing: border-box;
}
#home-info {
height: 300px;
}
#home-info .info-img {
  float: left;
  width: 50%;
  background: url('https://images.pexels.com/photos/573552/pexels-photo-573552.jpeg') no-repeat center center/cover;
  height: 100%;
}
#home-info .info-content {
  float:right;
  width: 50%;
  height: 100%;
  text-align: center;
  padding: 50px 30px;
}

#home-info .info-content p {
  padding-bottom: 30px;
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<section id="home-info">
<!-- <div class="box-img"> -->
  <div class="info-img"></div>
    <div class="info-content">
        <h2>The History of Our Hotel</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>      
    </div>
<!-- </div> -->
</section>	
</body>
</html>

Answer 1

您错过了CSS的结尾，并且info-img div包含空白。您必须添加任何图像或文本才能看到div。我已经更新了代码。希望此解决方案会有所帮助。

#home-info {
  height: 400px;
  width:800px;
}
#home-info .info-img img {
    max-width: 100%;
    width: 100%;
}
#home-info .box-img {
    display: flex;
}
#home-info .info-img {
  width: 50%;
  background: #ccc;
  min-height: 100%;
}
#home-info .info-content {
  width: 50%;
  height: 100%;
  text-align: center;
  padding: 50px 30px;
}

#home-info .info-content p {
  padding-bottom: 30px;
}

<section id="home-info">
    <div class="box-img">
        <div class="info-img">
            <img src="https://via.placeholder.com/200">
        </div>
        <div class="info-content">
            <h2>The History of Our Hotel</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
        </div>
    </div>
</section>

Answer 2

您可以检查下面的代码片段，因为CSS代码中缺少一些右括号，希望下面的代码可以帮助您！

#home-info {
  height: 400px;
  width:800px;
}
#home-info .box-data{
  width:100%;
  float:left;
}
#home-info .info-img {
  float: left;
  width: 50%;
  background: #ccc;
}
#home-info .info-img img{
  width:100%;
  height:auto;
}
#home-info .info-content {
  float:right;
  width: 50%;
  height: 100%;
  text-align: center;
  padding: 50px 30px;
  box-sizing:border-box;
}
#home-info .info-content p {
  padding-bottom: 30px;
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<section id="home-info">
  <div class="box-data">
    <div class="info-img">
      <img alt="image" height="auto" width="100%" src="https://images.unsplash.com/photo-1531361171768-37170e369163?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1875&q=80"/>
    </div>
    <div class="info-content">
      <h2>The History of Our Hotel</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>      
    </div>
  </div>   
</section>	
</body>
</html>

Answer 3

最后，我通过更改代码解决了问题。

* {
box-sizing: border-box;
}
#home-info .box-img {
height: 300px;
}
#home-info .info-img {
  float: left;
  width: 50%;
  background: url('https://images.pexels.com/photos/573552/pexels-photo-573552.jpeg') no-repeat center center/cover;
  height: 100%;
}
#home-info .info-content {
  float:right;
  width: 50%;
  height: 100%;
  text-align: center;
  padding: 50px 30px;
}

#home-info .info-content p {
  padding-bottom: 30px;
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<section id="home-info">
 <div class="box-img">
  <div class="info-img"></div>
    <div class="info-content">
        <h2>The History of Our Hotel</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>      
    </div>
   </div>
</section>	
</body>
</html>

DataRow

另外div导致图像消失

3 个答案: