Css 关于将Div划分为三列两行的问题_Css

Css 关于将Div划分为三列两行的问题

css

Css 关于将Div划分为三列两行的问题,css,Css,请看一下这段代码，让我知道如何将div内部划分为3列2行，如下图所示 |--------|--------|---------| | | | | | 1 | 2 | 3 | | | | | |---------------------------| | | | | | 4 | 5 | 6

请看一下这段代码，让我知道如何将div内部划分为3列2行，如下图所示

 |--------|--------|---------|
 |        |        |         |
 |   1    |   2    |    3    |
 |        |        |         |
 |---------------------------|
 |        |        |         |
 |    4   |   5    |    6    |
 |        |        |         |
 |--------|--------|---------|

我已经试过了，但没有成功

<div id="main">
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
     <div id="4"></div>
     <div id="5"></div>
     <div id="6"></div>
 </div>

#main{width:300px; height:150px; border:1px solid #ccc;}
#1{width:50px; height:75px; border:1px solid #ccc;}
#2{width:50px; height:75px; border:1px solid #ccc;}
#3{width:50px; height:75px; border:1px solid #ccc;}
#4{width:50px; height:75px; border:1px solid #ccc;}
#5{width:50px; height:75px; border:1px solid #ccc;}
#6{width:50px; height:75px; border:1px solid #ccc;}


#主{宽度：300px；高度：150px；边框：1px实心#ccc；}
#1{宽度：50px；高度：75px；边框：1px实心#ccc；}
#2{宽度：50px；高度：75px；边框：1px实心#ccc；}
#3{宽度：50px；高度：75px；边框：1px实心#ccc；}
#4{宽度：50px；高度：75px；边框：1px实心#ccc；}
#5{宽度：50px；高度：75px；边框：1px实心#ccc；}
#6{宽度：50px；高度：75px；边框：1px实心#ccc；}

我已经更新了你的小提琴：

您需要让每个div

浮动

。我相应地修改了其他div

HTML

<div id="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

做这件事时，你要记住几件事

float：左-这会将每个div与最后一个div的左侧堆栈对齐，并在需要时删除一行
边框：1px实心#ccc-边框是在宽度和高度中添加的，因此应通过从定义的div宽度中删除边框宽度来考虑
您不需要为每个元素定义ID，而是使用#main div
覆盖所有元素

如果将div
标记用作单元格，则可能需要查看表
显示属性：
例如：
HTML：
<div id="table">
    <div id="header">
        <div class="headerCell">A</div>
        <div class="headerCell">B</div>
        <div class="headerCell">C</div>
    </div>
    <div class="row">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
    </div>
</div>

#table {
    display: table;
    width: 300px;
    background: yellow;
}

#header {
    display: table-header-group;
}

.headerCell {
    display: table-cell;
    font-weight: bold;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
}

否则，您可能需要浮动您的div
，并使用clear
属性。
您可能需要这样做
HTML:
 <div id="main">
    <div id="1" class='col'>&nbsp;</div>
    <div id="2" class='col'>&nbsp;</div>
    <div id="3" class='col'>&nbsp;</div>
    <div id="4" class='col'>&nbsp;</div>
    <div id="5" class='col'>&nbsp;</div>
    <div id="6" class='col'>&nbsp;</div>
</div>

HTML:
  <div id="main">
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
     <div id="4"></div>
     <div id="5"></div>
     <div id="6"></div>
 </div>

 <div id="main">
     <div id="1" class="innerBox"></div>
     <div id="2" class="innerBox"></div>
     <div id="3" class="innerBox"></div>
     <div id="4" class="innerBox"></div>
     <div id="5" class="innerBox"></div>
     <div id="6" class="innerBox"></div>
 </div>

#main
的px宽度应大于#main div
ie#主宽度>3*div\u宽度
应为主分区指定高度，并可为各个分区定义百分比。
检查此提琴：
#main {
    width: 350px;
    height:200px;
}

#main div {
    width: 100px;
    height: 50%;
    border: 1px solid #ccc;
    float: left;
}

#main {
    width:300px; height:150px; border:1px solid #ccc;
}
.innerBox {
    width:50px; height:75px; border:1px solid #ccc; float:left;
}
.innerBox:nth-child(3n+1) {
    clear: both;
}


HTML:
  <div id="main">
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
     <div id="4"></div>
     <div id="5"></div>
     <div id="6"></div>
 </div>

 <div id="main">
     <div id="1" class="innerBox"></div>
     <div id="2" class="innerBox"></div>
     <div id="3" class="innerBox"></div>
     <div id="4" class="innerBox"></div>
     <div id="5" class="innerBox"></div>
     <div id="6" class="innerBox"></div>
 </div>

@scrowler添加边框时，您的布局将中断。有时HTML表格是一个合适的元素。@SteveWellens不是表格本身，而是具有table
属性的div（现在不推荐使用表格）。以百分比设置宽度和高度@arielnmz表元素未被弃用。从HTML4开始使用它是有争议的。如果你反对我，请礼貌地告诉我原因。一个糟糕的解决方案，如果尺寸改变或边框调整，其他数字也需要改变。一个可持续的解决方案应该只需要在一个地方进行改变。此外，要求对否决票作出解释是愚蠢的。@Nit-事实上，一个原因是出于礼貌，这不是一个坏的解决方案，如果你看看他要求什么，它完全符合他的要求。他把一切都放在非常具体的维度上。在当代网络发展中，一个共同的事实是，事情总是在变化。一个好的解决方案没有任何缺陷，并且易于维护。所以，是的，这是一个糟糕的解决方案。在这个网站上的每一次投票都不可避免地带有主观性——不管投票人是否认为这篇文章是好的。你的论点是没有意义的。谢谢斯克鲁勒，但是身高设置呢？你可能想要的部分不是给你一些建议吗？提示：这是一个建议。
#main {
    width:300px; height:150px; border:1px solid #ccc;
}
.innerBox {
    width:50px; height:75px; border:1px solid #ccc; float:left;
}
.innerBox:nth-child(3n+1) {
    clear: both;
}