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 周围有一个边距，内部是两个 DIV。我希望两个 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

内部两个 div-boxes 使用 float，为了兼容低版本的 IE，out box 也应该浮动，注意margin应该替换为padding. display:block对于像 div 这样的框元素来说，这是多余的。

   <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 回答