垂直列中有2列的div

我試圖用DIV創建一個接一個的列，每個DIV分成兩列......我設法做到了，但有些東西告訴我它不完全是語義的。那麼如果有人可以看一看，並告訴我如何更好地編碼？垂直列中有2列的div

<body> 

     <div id="wrapper"> 

     <div id="lt"> 

     <div id="bl"> 
      <p>column 1</p> 
     </div> 

     <div id="br"> 
      <p>column 2</p> 
     </div> 

     <p><br>&nbsp;</p> 

     <div id="bl"> 
      <p>column 1</p> 
     </div> 

     <div id="br"> 
      <p>column 2</p> 
     </div> 

     </div> 


     <div id="rt"> 
     <p>123</p> 
     </div> 

    </div> 

    </body>

@import url("reset.css"); 

body { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 14px; 
color:#000; 
} 

#wrapper { 
margin: 0 auto; 
width: 960px; 
padding: 4px; 
background-color: #999; 
height: 600px; 
} 

#lt { 
background: #33CCFF; 
width: 400px; 
float: left; 
background-color: #333; 
height: 600px; 
} 

#rt { 
float: left; 
background: #FFFFFF; 
width: 560px; 
} 

#bl{ 
float:left; 
width:120px; 
height:120px; 
background:#fff333; 
} 
#br{ 
float:left; 
width:280px; 
background:#e4e4e4; 
height: 120px; 
}

來源

2013-07-21 TM23

一些改進：

代替：<p><br> </p>使用適當的CSS-利潤率，如：margin-bottom: 20px;
你有相同的多個ID名稱，ID必須是唯一的，我們e類代替！
使用語義的名稱：不是br寫block-right
漂浮可以是有問題的，但他們並不需要的人。使用display: inline-block可能是替代

來源

2013-07-21 18:13:00 nirazul

另外嘗試只是不使用任何ID。強制自己編寫類並重用其CSS。當你真的需要一個獨特的選擇時保存ids –

浮游物可能有問題，但我不會像建議的那樣避免它們。只要學習浮標的警告。這是明確的修復 –

如何用類替換ID？它在瀏覽器上有很大的不同嗎？另外，在這種情況下，我應該如何命名每個類，它們是否應該與包裝相關？如果你想要的話，可以將其設置爲：D – TM23

垂直列中有2列的div

回答

相關問題