使用css创建div

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。例如：

/**** 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>

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那么这可以很容易地生产。