0

私はDIVで列を次々と作成しようとしています.各DIVは2つの列に分割されています..私はそれを行うことができましたが、それは正確にはセマンティックではないことを教えてくれます...だから誰かが見て教えてくれたらそれをより良くコーディングする方法は？

http://jsfiddle.net/SynQp/1/

    <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;
}
4

1 に答える 1

0

いくつかの改善:

  • 代わりに: 次の<p><br>&nbsp;</p>ような適切な CSS マージンを使用します。margin-bottom: 20px;
  • 同じ名前の ID が複数あります。ID は一意である必要があります。代わりにクラスを使用してください。
  • brセマンティック名を使用する: writeの代わりにblock-right
  • フロートは問題になる可能性がありますが、そうである必要はありません。を使用display: inline-blockすることが代替手段になる場合があります
于 2013-07-21T18:13:00.747 に答える