使用 css 设计 Div

Question

用 css 3 div 设置样式的最佳方式是什么？ Div1和2（等宽）左边一上一下，右边div3。类似于：

div1  { height: 200px; width:400px }
div2  { height: 600px; width:400px }
div3  { height: 800px; width:600px }

Answer 1

您可以使用可重复使用的 class:

<div class="h200 w400">

</div>
<div class="h600 w400">

</div>
<div class="h800 w600">

</div>

和CSS

.h200{
  height:200px;
}
.h600 {
  height:600px
}
.h800 {
  height:800px;
}
.w400 {
  width:400px;
}
.w600 {
  width:600px
}

如果你用 SASS（或类似的）构建你的 CSS，那么这很容易产生。

Answer 2

最好的办法是先取两个div，一个在左边，一个在右边，左边再放两个div。例如：

/**** CSS FILE ****/
.left{
  float:left;
  }

.right{
  float:right;
  }

.div1{
  width:400px;
  height:200px;
  }

.div2{
  width:400px;
  height:600px;
  }

.div3{
  width:600px;
  height:800px;
  }

<!-- HTML File -->

    <div class="left">
         <div class="div1"> <!-- My div1 --> div1 </div>
         <div class="div2"> <!-- My div2 --> div2 </div>
    </div>

    <div class="right">
        <div class="div3"> <!-- My div3 --> div3 </div>
    </div>

使用 css 设计 Div

Styling Divs with css

css

stylesheet