Question

我试图让我的照片和描述div在水平方向上排成一行。有3个不同的div我希望横向并排。当我使用float：left时，它不会允许我。我已经试了好几天了，但仍然无法正常工作。如果有人能帮助我解决这个问题，我将不胜感激。每个描述之前都有图像，但现在将显示在下面的预览中。以下是我的代码：

＆＃13;

#content {
  width: 100px;
  height: 600px;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  float: left;
}

#1 {
  float: left;
  width: 300px;
  height: 300px;
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
}

#2 {
  float: left;
  width: 300px;
  height: 300px;
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
}

#3 {
  float: left;
  width: 300px;
  height: 300px;
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
}

＆＃13;

<div id="Content">
  <div id="1">
    <p><img src="http://beerhold.it/300/300" height="300px" width="300px" alt="Project 1"></p>
    <p>Description, Description, Description</p>
  </div>

  <div id="2">
    <center>
      <p><img src="http://beerhold.it/300/300" height="300px" width="300px" alt="Project 2"></p>
    </center>
    <center>
      <p>Description, Description, Description</p>
    </center>
  </div>

  <div id="3">
    <p><img src="http://beerhold.it/300/300" height="300px" width="300px" alt="Project 3"></p>
    <p>Description, Description, Description</p>
  </div>


</div>

＆＃13;

Answer 1

你的代码中有一些错误

您的容器只有100px宽，使其更大。
如果您应用了相同的属性，请使用类而不是在CSS中重复自己
请勿使用width/height HTML属性，而是使用CSS属性
CSS具有案例敏感性。谨慎使用#Content和#content
不要使用center html，不推荐使用。

使用flexbox，因此您可以轻松实现响应式布局

#content {
  max-width: 900px;
  height: 600px;
  margin: 10px;
  display: flex;
  border: red solid;
}

.divs {
  padding: 25px
}

img {
  max-width: 100%
}

<div id="content">
  <div class="divs" id="1">
    <p><img src="//placehold.it/300x300" alt="Project 1"></p>
    <p>Description, Description, Description</p>
  </div>

  <div class="divs" id="2">
    <p><img src="//placehold.it/300x300" alt="Project 2"></p>
    <p>Description, Description, Description</p>
  </div>

  <div class="divs" id="3">
    <p><img src="//placehold.it/300x300" alt="Project 3"></p>
    <p>Description, Description, Description</p>
  </div>


</div>

水平并排获得div

1 个答案: