Css 垂直列中有两列的div_Css_Html

Css 垂直列中有两列的div

css html

Css 垂直列中有两列的div,css,html,Css,Html,我试着用DIV一个接一个地写一列，每个DIV分成两列..我已经设法做到了，但有些东西告诉我它不完全是语义的…所以如果有人能看一下并告诉我如何更好地编码它一些改进：而不是：使用适当的CSS边距，例如：边距底部：20px 您有多个同名ID，ID必须唯一，请改用类使用语义名称：而不是brwriteblock right 浮动可能会有问题，但不需要有问题。使用display:inline block可能是一种替代方法另外，尽量不要使用任何ID。强迫自己编写类并重用它们的CSS。当你真的需要一

我试着用DIV一个接一个地写一列，每个DIV分成两列..我已经设法做到了，但有些东西告诉我它不完全是语义的…所以如果有人能看一下并告诉我如何更好地编码它

一些改进：

而不是：
使用适当的CSS边距，例如：
```
边距底部：20px
```


您有多个同名ID，ID必须唯一，请改用类
使用语义名称：而不是br
writeblock right
浮动可能会有问题，但不需要有问题。使用display:inline block
可能是一种替代方法

另外，尽量不要使用任何ID。强迫自己编写类并重用它们的CSS。当你真的需要一个唯一的SSelections时，保存ID可能会有问题，但我不会像建议的那样避免它们。只需了解浮动的注意事项。哪一个是明确的修复我如何用类替换ID？它在不同浏览器之间有很大的区别吗？另外，在这种情况下，我应该如何命名每个类，它们是否应该相对于包装器？如果你想，就把它摆弄一下
    <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;
}