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

Question

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

它看起来很好。只是我没有太多的自由。所以我想做3 个 div，我可以在其中更改更多某些元素的位置。这就是我想要实现的，它只是一张图片 -> 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;
 }