从底部上升的 div 中的动画 div答案

【问题标题】：Animated div within a div rising from the bottom从底部上升的 div 中的动画 div
【发布时间】：2014-05-08 08:02:36
【问题描述】：

http://www.canvasmagazine.net/

有人可以告诉我这些人是如何设法制作这种基于正方形的布局的，因为我尝试了表格和 div，但无法使页面布局看起来相同，我喜欢内容和图像的显示方式。

【问题讨论】：

请不要为此使用表格。在我看来，它不是语义的。

标签： javascript html css tabular

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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%; }

使用 span 将您的内容添加到相关的 div 以方便换行。

希望对你有帮助

【讨论】：

【解决方案4】：

很简单，我把他们用过的 HTML/CSS 拿来在这里简化了http://jsfiddle.net/gzda5/1/

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

在左栏：

float: left;

在右栏：

float: right;

【讨论】：