Question

我在div标签内部使用4个div标签，使用以下标签划分为4个相等的区域。有没有其他方法来划分或改善这种划分

＆＃13;

<div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;"> 
             <div style="width: 336px; height: 251px; display: inline-block; float: left;">
             </div>
             <div style="width: 336px; height: 251px">
             </div>
             <div style="width: 336px; height: 251px; display: inline-block; float: left;">
             </div>
             <div style="width: 336px; height: 251px">
             </div>

         </div>

＆＃13;

Answer 1

对内部div使用<div style="width: 50%; height: 50%">。

对于样式，我没有其他任何改进建议。

另一方面，如果你想在设计时看到div，我可以建议你为它们分配临时背景颜色，如：

＆＃13;

<div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;background-color:gray"> 
             <div style="width: 50%; height: 50%; display: inline-block; float: left;background-color:yellow">
             </div>
             <div style="width: 50%; height: 50%;background-color:red;float: left">
             </div>
             <div style="width: 50%; height: 50%; display: inline-block; float: left;background-color:green">
             </div>
             <div style="width: 50%; height: 50%;background-color:blue;float:left">
             </div>
         </div>

＆＃13;

编辑：感谢背景颜色，我意识到你的浮动div隐藏了其他颜色。您应该为所有内部div添加float:left。

Answer 2

这是你想要的效果吗？

＆＃13;

.container {
    display: flex;
    height: 300px;
}
.container div {
    flex: 1;
}

＆＃13;

<div class="container"> 
    <div style="background:red">A</div>
    <div style="background:blue">B</div>
    <div style="background:lime">C</div>
    <div style="background:cyan">D</div>
</div>

＆＃13;

或者是这个？

＆＃13;

.container {
    height: 300px;
    width: 300px;
}
.container div {
    width: 50%;
    height: 50%;
    float: left;
}

＆＃13;

<div class="container"> 
    <div style="background:red">A</div>
    <div style="background:blue">B</div>
    <div style="background:lime">C</div>
    <div style="background:cyan">D</div>
</div>

＆＃13;

使用div标签分成页面中的4个区域

2 个答案: