附近的HTML設計div

我想用html和css設計下面的screenShot。我的代碼有問題，我不能像使用screenShot一樣移動div。附近的HTML設計div

enter image description here

HTML：

<html> 
    <head> 
     <title></title> 
     <style> 
      .box1{ 
       border:1px solid; 
       width:200px; 
       height:100px; 
       float:right; 
      } 
      .box2{ 
       border:1px solid; 
       width:200px; 
       height:100px; 
       float:right; 
       clear: right; 
      } 
      .box3{ 
       border:1px solid; 
       width:200px; 
       height:100px; 
       float:right; 
       clear:none; 
      } 
      .box4{ 
       border:1px solid; 
       width:200px; 
       height:100px; 
       float:right; 
      } 
      .box5{ 
       border:1px solid; 
       width:200px; 
       height:100px; 
       float:right; 
       clear: right; 
      } 
     </style> 
    </head> 
    <body> 
     <div class='box1'></div> 
     <div class='box2'></div> 
     <div class='box3'></div> 
     <div class='box4'></div> 
     <div class='box5'></div> 
    </body> 
</html>

來源

2014-01-26 Mahdi.Pishguy

http://jsbin.com/iyOnAPEw/1/粘貼jsbin你的代碼，使人們可以看到它現在更容易 – Joeytje50

或者，也許你可以將您的佈局分成3列

CSS

.column{float:left} 
.column-middle{float:left;margin:0 5px} 
.box-sml{float:left;width:200px;height:100px;border:1px solid;margin-bottom:5px} 
.box-sml-bottom{float:left;width:200px;height:100px;border:1px solid;clear:left} 
.box-lrg{float:left;width:200px;height:207px;border:1px solid}

HTML

<div class='column'> 
    <div class='box-sml'></div> 
    <div class='box-sml-bottom'></div> 
    </div> 

    <div class="column-middle"> 
    <div class="box-lrg"></div> 
    </div> 

    <div class='column'> 
    <div class='box-sml'></div> 
    <div class='box-sml-bottom'></div> 
    </div>

http://jsbin.com/UqUNUzUS/2

來源

2014-01-26 13:12:30 amaro

這是更好地組織你的網站像側邊欄，左，中和側邊欄從左到右，裏面每一個你可以創建你的小箱子的主體盒。

這樣你就有一個乾淨的CSS和控制框之間的空間。

希望這可以幫助你。

來源

2014-01-26 12:49:28

CSS：

.box1,.box2,.box3,.box4,.box5{border:1px solid;float:left;} 
.box1,.box3{margin-bottom:5px;} 
.box1{margin-right:5px;} 
.box3,.box4{margin-left:5px;} 
.box1,.box3,.box4,.box5 {  
    width:200px; 
    height:100px; 
    float:left;  
} 
.box2{ 
    width:200px; 
    height:207px; 
    float:left; 
} 
.box5{margin-top:-102px;}

DEMO here.

來源

2014-01-26 12:49:30 Hiral

-1

你可以使用利用display:table，display:table-row和display:table-cell樣式屬性的方法，它會使就像<table>，JSFiddle here

來源

2014-01-26 12:53:39 chrki

附近的HTML設計div

回答

相關問題