正如您在此图中看到的,我正在尝试容纳我的网页。我不太擅长CSS,但是我已经尽力了。特别是我无法将div3放置在它对应的位置,它会向下移动。我究竟做错了什么?
body,
html {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
border: 1px solid black;
}
.div1 {
border: 1px solid red;
width: 70%;
height: 50%;
}
.div2_container {
height: 50%;
border: 1px solid blue;
width: 70%;
}
.div2_son {
display: inline-block;
width: 32%;
border: 1px solid green;
height: 100%;
}
.div3 {
display: inline;
height: 100%;
width: 30%;
border: 1px solid brown;
}
<div class="container">
<div class="div1">
</div>
<div class="div2_container">
<div class="div2_son">
</div>
<div class="div2_son">
</div>
<div class="div2_son">
</div>
</div>
<div class="div3">
</div>
</div>
最佳答案
尝试这个...
更改div1和div 2容器float:left
和div 3 display: inline-block;
body,
html {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
border: 1px solid black;
}
.div1 {
border: 1px solid red;
width: 70%;
height: 50%;
float:left
}
.div2_container {
height: 50%;
border: 1px solid blue;
width: 70%;
float:left
}
.div2_son {
display: inline-block;
width: 32%;
border: 1px solid green;
height: 100%;
}
.div3 {
display: inline-block;
height: 100%;
width: 29%;
border: 1px solid brown;
}
<div class="container">
<div class="div1">
</div>
<div class="div2_container">
<div class="div2_son">
</div>
<div class="div2_son">
</div>
<div class="div2_son">
</div>
</div>
<div class="div3">
</div>
</div>
关于css - 如何使用百分比来容纳divs,并不完美,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52885321/