Html 我应该使用div还是display:table？_Html_Css

Html 我应该使用div还是display:table？

html css

Html 我应该使用div还是display:table？,html,css,Html,Css,我有以下代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <style type="text/css"> body, html{ height: 100%; } #outer {

我有以下代码：

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

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


正文，html{
身高：100%；
}
#外{
宽度：90%；
身高：90%；
利润率：5%5%5%5%；
背景色：#333；
}
#左内容{
身高：100%；
宽度：50%；
}
#正确内容{
身高：100%；
宽度：50%；
}
xx
xx

外分区周围有一个边距，内分区有两个分区。我想让两个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>

我怎样才能让它们并排

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

另一个相关问题。对于类似的内容，最好先使用display:table，然后使用table cell？

尝试添加css

display:inline block

属性，如下所示：

#left-content, #right-content{
   display: inline-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>

或者使用

float

属性，两个div都使用“left”值，但我更喜欢

inline block

的方式。在CSS中添加float:right在一个上，float:left在另一个上。如果仍然显示相同，则增加外部分区的总宽度。

通常的方法是使用CSS float

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

首先，您不需要指定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>

“使它们并排”所需的是浮动

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

在这里：

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


正文，html{
身高：100%；
}
#外{
宽度：90%；
身高：90%；
利润率：5%5%5%5%；
背景色：#333；
}
#左内容{
身高：100%；
宽度：50%；
浮动：左；
}
#正确内容{
身高：100%；
宽度：50%；
浮动：左；
}
xx
xx

在此了解有关浮动的更多信息：

对内部两个div框使用浮动，为兼容较低版本IE，out框也应浮动，注意

边距

应替换为

填充

。

display:block

对于像div这样的box元素是多余的。

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

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


正文，html{
身高：100%；
}
#外{
宽度：90%；
身高：90%；
填充物：5%5%5%5%；
背景色：#333；
浮动：左；
}
#左内容{
身高：100%；
宽度：50%；
}
#正确内容{
身高：100%；
宽度：50%；
}
xx
xx

要回答第二个问题：