Question

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

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

我已经尝试过跟This Demo：但没有成功！

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

Answer 1

如果您使用div代码作为单元格，则可能需要查看table显示属性：

this fiddle中的示例：

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

<强> CSS ：

#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属性。

Answer 2

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>

<强> CSS：

#main {
    width: 350px;
    height:200px;
}

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

#main的宽度px应大于#main div宽度的3倍即#main_width > 3* div_width 应为主div指定高度，并且可以为各个div定义百分比。

Answer 3

我更新了你的小提琴：http://jsfiddle.net/k5zVe/8/

您需要拥有每个div float。我相应地修改了其他div。

<强> HTML

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

<强> CSS

#main{width:300px; height:150px; border:1px solid #ccc;}
#main div{ float:left; width:98px; height:73px; border:1px solid #ccc;}

Answer 4

在执行此操作时，您需要记住一些事项。

float: left; - 这会将每个div对齐到最后一个旁边的堆栈，并在需要时删除一行。

border: 1px solid #ccc; - 边框添加到宽度和高度，因此应该通过从您将div宽度定义的边框宽度移除来考虑。

您不需要为每个元素定义ID，而是使用#main div覆盖所有元素。

Updated example:

#main {
    width: 300px;
}

#main div {
    width: 98px;
    height: 48px;
    border: 1px solid #ccc;
    float: left;
}

Answer 5

你可能需要这样。

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>

CSS：

#main{width:231px; height:154px; border:1px solid #ccc;}
.col { width:75px; border:1px solid #ccc; height:75px; float:left }

Answer 6

检查这个小提琴：

http://jsfiddle.net/ZJ4w3/

HTML：

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

<强> CSS：

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

将分为三栏两行的问题

6 个答案: