[分享]css两列两行

CSS是网页布局中非常重要的一部分，通过CSS我们可以将网页进行美化并且实现各种各样的效果。其中，两列两行布局也是非常常见的一种布局方式。 / 左侧列 / .leftcolumn { float: l...

CSS是网页布局中非常重要的一部分，通过CSS我们可以将网页进行美化并且实现各种各样的效果。其中，两列两行布局也是非常常见的一种布局方式。

 /* 左侧列 */
  .left-column {
     float: left;
     width: 50%;
     height: 200px;
     background-color: #ccc;
  }
  
  /* 右侧列 */
  .right-column {
     float: right;
     width: 50%;
     height: 200px;
     background-color: #eee;
  }
  
  /* 上方行 */
  .top-row {
     width: 100%;
     height: 100px;
     background-color: #999;
  }
  
  /* 下方行 */
  .bottom-row {
     width: 100%;
     height: 100px;
     background-color: #bbb;
  } 

上述代码中，我们使用了float属性来实现两列布局，其中.left-column和.right-column设置了各自的宽度为50%。同时，我们通过设置height属性来指定了两列的高度。

在代码的下方，我们还设置了两行的样式，包括top-row和bottom-row。这两行的宽度均为100%，高度为100px。通过这样的设置，我们可以实现两列两行布局的效果，具体可参考下面的代码：

 <div class="top-row"></div>
  <div class="left-column"></div>
  <div class="right-column"></div>
  <div class="bottom-row"></div> 

通过上述代码，我们可以看到我们分别添加了四个div标签，其中前两个标签是用于设置两行的，后两个标签是用于设置两列的。由于CSS的左右浮动属性的存在，上下两行在高度相等的情况下，会紧贴着两列排布，从而实现了两列两行的效果。