Question

我有以下代码：

<!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？

Answer 1

首先，您不需要指定display：block;对于每个div - 这是默认值。

您“并排制作”所需要的是花车。

下面：

<!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/

Answer 2

尝试添加css display: inline-block属性，如下所示：

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

或使用float属性，两个div都有'left'值，但我更喜欢inline-block方式。

Answer 3

在CSS中添加float：右边一个，float：左边另一个。如果它仍然显示相同，请增加外部div的总宽度。

Answer 4

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

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

我应该使用DIVS还是display：table？

4 个答案: