Question

http://www.canvasmagazine.net/

有人可以告诉我这些人如何设法制作这个基于方形的布局，因为我已经尝试了桌子和div但是不能让页面布局看起来一样，我喜欢内容和图像的显示方式。

Answer 1

创建单元格并浮动它们。

HTML：

<div id="container">
   <div id="cell1">
      <div>Article1</div>
      <div>Article2</div>
   </div>    
   <div id="cell2">
      <div>Article3</div>
      <div>Article4</div>  
   </div>  
   <div id="cell3">3</div>  
</div>

CSS：

#container{
    width: 100%;
    overflow: hidden; 
}

#cell1{
    float: left;
    width: 33%;
    background-color:red;
}
#cell2{
    float: left;
    width: 33%;
    background-color:blue;
}
#cell3{
    float: left;
    width: 33%;
    background-color:green;
}

Answer 2

每列都是一个div，里面有不同的div。

Answer 3

将这些骰子放入体内

   <div class="column-center">Column center</div>
   <div class="column-left">Column left</div>
   <div class="column-right">Column right</div>

将这些css代码放入您的css文件

.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

使用跨度将您的内容添加到相关div，以便轻松换行。

希望这会有所帮助

Answer 4

这很简单，我已经使用了他们使用的HTML / CSS并在此处对其进行了简化http://jsfiddle.net/gzda5/1/

您只需设置div宽度并正确浮动列。

在左栏：

float: left;

在右栏：

float: right;

div中的动画div从底部升起

4 个答案: