Question

以这种方式使用css 3 div进行样式的最佳方式是什么： Div 1和2（相同宽度）一个向上，一个向下在左侧，div 3在右侧。类似的东西：

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

Answer 1

最好的方法是首先取两个div，一个应该在左侧，另一个应该在右侧，左侧应该有两个div。例如：

＆＃13;

/**** CSS FILE ****/
.left{
  float:left;
  }

.right{
  float:right;
  }

.div1{
  width:400px;
  height:200px;
  }

.div2{
  width:400px;
  height:600px;
  }

.div3{
  width:600px;
  height:800px;
  }

＆＃13;

<!-- 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>

＆＃13;

Answer 2

您可以使用可重复使用的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，则可以轻松生成。

使用CSS设计Divs

2 个答案: