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

你能看看这段代码，让我知道我如何能把一个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;}

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倍ie #main_width > 3* div_width高度应该为主div指定，并且可以为各个div定义百分比。

如果您使用div标记作为单元格，您可能需要查看table显示属性:

中的示例:

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

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

float: left; -这将使每个div在最后一个div旁边向左堆叠，并在需要时删除一行。

border: 1px solid #ccc; -边界是添加到宽度和高度，所以应该考虑从你定义的div宽度中删除边界宽度。

您不需要为每个元素定义一个ID，而是使用#main div来覆盖它们。

更新的例子:
#main { width: 300px; } #main div { width: 98px; height: 48px; border: 1px solid #ccc; float: left; }

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

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

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

您可能需要这样。
HTML:
<div id="main"> <div id="1" class='col'> </div> <div id="2" class='col'> </div> <div id="3" class='col'> </div> <div id="4" class='col'> </div> <div id="5" class='col'> </div> <div id="6" class='col'> </div> </div>
CSS:
#main{width:231px; height:154px; border:1px solid #ccc;} .col { width:75px; border:1px solid #ccc; height:75px; float:left }

检查这个小提琴:
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; }

相关内容

最新更新

热门标签：