4つのdivで動作するCSSの浮動プロパティを取得する方法は?

4つのdivで動作するCSSの浮動プロパティを取得する方法は?私は4つのdivを持っていますが、例としてレイアウトを使ってalginを取得したいのですが、

                     div One     - div two
                     div Three   - div Four

ここでは、私は次のCSSとHTMLコードを使用しようとしていますが、正しく整列していません。

      <html>
      <head>
      <title>Layout Example</title>
      <link rel="stylesheet" type="text/css" href="file:///C:/app3/css/custom-theme/jquery-ui-1.8.16.custom.css">
      <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
      
             </head>
             <body>
                   <div id="one" class="divs"> One </div>
                   <div id="two" class="divs"> Two</div>
                   <div id="three" class="divs"> Three </div>
                   <div id="four" class="divs"> Four </div>

             </body>
             </html>
ベストアンサー

#third 要素をすべて float:left および
clear:both (または clear:left

.divs
{
   width: 200px;
   height: 200px;
   float: left;
}
#one
{
   background-color: black;
   color: white;
}
#two
{
   background-color: blue;
}
#three
{
   background-color: red;
   clear: both;
}
#four
{
   background-color: green;
}

http://jsfiddle.net/h2DHb/1/

もう1つの方法は、 #container
height/width:400px の全体で作成し、 .divs
高さ/幅:50%:

<div id="container">
    <div id="one" class="divs"> One </div>
    <div id="two" class="divs"> Two</div>
    <div id="three" class="divs"> Three </div>
    <div id="four" class="divs"> Four </div>
</div>

#container {
   width: 400px;
   height: 400px;
}
.divs
{
   width: 50%;
   height: 50%;
   float: left;
}
#one
{
   background-color: black;
   color: white;
}
#two
{
   background-color: blue;
}
#three
{
   background-color: red;
   clear: left;
}
#four
{
   background-color: green;
}

http://jsfiddle.net/h2DHb/2/

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です