使用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那麼這可以很容易地生產。