我想避免对 HTML 进行任何更改,因为这可能会导致其他布局和设计出现倒退。因为我们在所有设计和布局中使用相同的模板。
需要在不使用.content2
绝对位置的情况下实现以下布局。并且 content2
和 content3
应该具有相同的高度。
.wrapper {
display: flex;
}
.content {
background: red;
}
.content2 {
background: green;
}
.content3 {
background: yellow;
}
.newLayout {
position: relative;
}
.newLayout .content2 {
position: absolute;
right: 0;
width: 92px;
padding: 2px 10px;
}
.newLayout .content3 {
white-space: nowrap;
margin-top: 20px;
padding: 10px;
}
<div class="wrapper newLayout">
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentia</div>
<div class="content2">Content Two</div>
<div class="content3">Content Three</div>
</div>
最佳答案
使用 flexbox
时,您需要嵌套 flexbox 才能拥有此布局。像这样的二维布局对于 CSS grids
来说是理想的情况。 - 请参阅下面的演示:
.wrapper {
display: grid;
grid-template-areas: "one two" "one three";
}
.content {
background: red;
grid-area: one;
}
.content2 {
grid-area: two;
background: green;
}
.content3 {
grid-area: three;
background: yellow;
}
<div class="wrapper">
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentia</div>
<div class="content2">Content Two</div>
<div class="content3">Content Three</div>
</div>
关于html - 是否可以在不使用绝对位置的情况下进行以下布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54683700/