Question

我已经有了一个网页。这可以在这里看到 - ＆gt; https://plnkr.co/edit/5NWm4E868nXYyixd2SLv?p=preview

它看起来很好。只有我没有太大的自由。所以我想做 3个div我可以更改某些元素的位置。 这就是我想要实现的目标，只是一张图片 - ＆gt; https://ibb.co/jDF6hF 这比单词解释得好。

这就是我现在所拥有的：https://plnkr.co/edit/sqpAWK1h6dECDyM1SaAl?p=preview

正如您所看到的，它现在看起来并不多。我想知道你是否知道一种更好的方法来匹配图片。

#wrapper {
  overflow: hidden;
}

.item {
  float: left;
  width: 27%;
  outline: 1px solid blue;
  margin: 1% 1% 1% 1%;
  padding: 2%;
}

.imageleft {
  float: left;
  margin: 10% 00% 00% 20%;
}

.circle {
  border: solid 2px #73B7DB;
  background: #73B7DB;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  text-align: center;
  line-height: 440%;
  font-size: 22px;
  text-decoration: none;

HTML

<div id="wrapper">
  <div id="text" class="item">
    <div id="midleft"><a class="imageleft circle" id="how"><font color="white">Wie</font></a></div>
    <div id="midleft"><a class="imageleft circle" id="how"><font color="white">Wie</font></a></div>
    <div id="midleft"><a class="imageleft circle" id="how"><font color="white">Wie</font></a></div>

  </div>
  <div id="module" class="item">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole</div>



  <div id="image" class="item"><img class="imageright" src="https://placehold.it/300x200" /></div>
</div>

Answer 1

现在右边的img没有响应，它也没有修复它的容器。只需添加一些css即可使img正确响应。喜欢这个

.imageright {
    max-width:100%;
    height: auto;
 }

Answer 2

我改变了很多。首先，当你使用id时，它们在页面上必须是唯一的。

我使用flexboxes进行布局，使页面响应。

＆＃13;

.wrapper {
  display: flex;
  justify-content: space-between;
}

.leftColumn {
  width: 20%;
  display: flex;
  flex-direction: column;
}

.middleColumn {
  width: 55%;
}

.rightColumn {
  width: 20%;
}

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle:not(:last-child) {
  margin-bottom: 1em;
}

.imageleft {
  color: white;
}

.rightColumn img {
  width: 100%;
  height: auto;
}

.rightColumn img:not(:last-child) {
  margin-bottom: 1em;
}

＆＃13;

<div class="wrapper">
  <div class="leftColumn">
    <div class="circle">
      <a class="imageleft">Wie</a>
    </div>
    <div class="circle">
      <a class="imageleft">Wie</a>
    </div>
    <div class="circle">
      <a class="imageleft">Wie</a>
    </div>
  </div>
  <div class="middleColumn">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole
  </div>
  <div class="rightColumn">
    <img class="imageright" src="https://placehold.it/300x200" />
    <img class="imageright" src="https://placehold.it/300x200" />
  </div>
</div>

＆＃13;

Answer 3

图片与您拥有的最大差异是比率。尝试将.item元素的宽度更改为15％，60％和25％。然后尝试将内部宽度更改为相对值（这可能有点棘手，我建议用图像替换圆圈而不是设置宽度：100％）。另外，要查看.item div的实际外观，请将 .item高度设置为100％或100vh（视口高度）。

此外，为了更加自由地使用布局，您可以退房css grid，但要注意浏览器的兼容性。

如何使现有网页更加结构化，3个div彼此相邻

3 个答案: