0

次のコードがあります。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">

       body, html{
    height: 100%;
}
        #outer {
            width: 90%;
            height: 90%;
            margin: 5% 5% 5% 5%;
            background-color: #333;
        }
        #left-content {
            height: 100%;
            width: 50%;
        }
        #right-content {
            height: 100%;
            width: 50%;
        }
    </style>

    <div id="outer" style="display: block">
      <div id="left-content" style="display: block; background-color: red;">xx</div>
      <div id="right-content" style="display: block; background-color: yellow;">xx</div>
    </div>

</body>
</html>

外側の DIV には、その周囲と内側に 2 つの DIV のマージンがあります。2 つの DIV を並べて配置したかったのですが、一方が他方の下にあるようです。

それらを並べて表示するにはどうすればよいですか？

別の関連する質問。このような場合は、 display: table を使用してから table-cell を使用する方がよいでしょうか?

4

5 に答える 5

1

まず、display:block; を指定する必要はありません。すべての div - これがデフォルトです。

「並べて作る」ために必要なのはfloatsです。

ここ：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">

       body, html{
    height: 100%;
}
        #outer {
            width: 90%;
            height: 90%;
            margin: 5% 5% 5% 5%;
            background-color: #333;
        }
        #left-content {
            height: 100%;
            width: 50%;
            float:left;
        }
        #right-content {
            height: 100%;
            width: 50%;
            float:left;
        }
    </style>

    <div id="outer">
      <div id="left-content" style="background-color: red;">xx</div>
      <div id="right-content" style="background-color: yellow;">xx</div> 

<!-- we need to clear -->
<br style="clear:both" />

    </div>

</body>
</html>

フロートについて詳しくは、http: //css-tricks.com/all-about-floats/をご覧ください。

于 2013-01-08T02:16:38.720 に答える
0

次のように、cssdisplay: inline-blockプロパティを追加してみてください。

#left-content, #right-content{
   display: inline-block;
}

またはfloat、両方のdivに「左」の値を指定してプロパティを使用しますが、私inline-blockはこの方法を好みます。

于 2013-01-08T02:13:14.790 に答える
0

CSS で、一方に float:right を追加し、もう一方に float:left を追加します。それでも同じように見える場合は、外側の div の合計幅を増やします。

于 2013-01-08T02:13:44.790 に答える
0

これを行う一般的な方法は、CSS float を使用することです。

http://css-tricks.com/all-about-floats

于 2013-01-08T02:13:59.793 に答える
0

下位バージョンの IE との互換性のために、内側の 2 つの div ボックスに float を使用して、out ボックスも float にするmargin必要がありますpadding。はdisplay:blockdiv のようなボックス要素には冗長です。

   <style type="text/css">

       body, html{
       height: 100%;

}
        #outer {
            width: 90%;
            height: 90%;
            padding: 5% 5% 5% 5%;
            background-color: #333;
            float:left;
        }
        #left-content {
            height: 100%;
            width: 50%;
        }
        #right-content {
            height: 100%;
            width: 50%;
        }
    </style>

    <div id="outer" style="display: block">
      <div id="left-content" style="display: block; background-color: red;">xx</div>
      <div id="right-content" style="display: block; background-color: yellow;">xx</div>
    </div>

</body>
</html>
于 2013-01-08T02:23:50.557 に答える