如何使现有网页更加结构化，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;
}

Answer 2

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

我使用弹性框作为布局，使页面响应。

.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;
}

<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>

Answer 3

图片和你所拥有的最大的区别是比率。尝试将.item 元素的宽度更改为 15%、60% 和 25%。而不是尝试将内部宽度更改为相对值(这可能有点棘手，我建议用图像替换圆圈，而不是设置宽度：100%(。 此外，要查看 .itemdiv 的实际外观，请将.item 高度设置为 100% 或 100vh(视口高度(。

此外，为了更自由地使用布局，您可以签出 css 网格，但要注意浏览器兼容性。