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

我有以下代码：我应该使用DIVS还是display：table？

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

来源

2013-01-08 Melina

要回答你的第二个问题：http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Shomz

使用浮子内部的两个格盒，用于对低版本的IE中，出箱也应该漂浮兼容，请注意margin应取代padding。对于像div这样的盒子元素，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>

来源

2013-01-08 02:23:50 mayaa

尝试添加CSS display: inline-block财产，像这样：

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

或者使用float财产，有两个div的“左”的价值，但我更喜欢这种方式inline-block。

来源

2013-01-08 02:13:14 kirugan

在CSS中添加浮点数：右对齐，浮点数：左。如果它仍然显示相同，请增加外部div的总宽度。

来源

2013-01-08 02:13:44 AmbuSreedharan

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

来源

2013-01-08 02:16:38 Madzgo

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

回答

相关问题