如何从适当的宽度和高度改变表格到div的布局？

我大约10年前被介绍给HTML，但直到大约一个月前才刚刚使用它。事实证明，我现在应该以不同的方式做所有事情（或者以前不知道做了什么错事），我试图坚持标准，但有些事情让我感到很困扰。如何从适当的宽度和高度改变表格到div的布局？

我听到很多人抨击表格布局的使用例如。我真的不知道为什么（表格真的很糟糕？），但仍尝试使用div，而不能使它们正常工作。我把我的问题隔离成了一个非常具有说明性的问题，涉及到一些我无法使用div的东西（以及一些我实际上甚至无法使用表格的东西）。

这里的问题：

My output

我已经尝试了很多东西，我很遗憾不能在这里甚至总结他们，因为我不记得了，但这里是我试图使代码它的工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 
<title>Tests</title> 
<style type="text/css"> 
body {height:100%;} 
#container 
{ 
    overflow: hidden; 
    width:680px; 
    padding: 0; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 40px; 
    border: 1px solid red; 
} 
#column_left 
{ 
    float: left; 
    width: 25%; 
    height: 100%; 
    margin: 0; 
    text-align: right; 
    border: 1px solid black; 
} 
#column_middle 
{ 
    float: left; 
    width: 49.2%;/*59.601562%*/ 
    height: 100%; 
    margin: 0; 
    text-align: center; 
    border: 1px solid black; 
} 
#column_right 
{ 
    float: left; 
    width: 25%; 
    height: 100%; 
    margin: 0; 
    border: 1px solid black; 
} 
.pad 
{ 
    margin: 10px; 
    padding: 2px; 
    border: 1px solid black; 
} 
</style> 
</head> 
<body style="margin:0;"> 
<div id="container"> 
    <div id="column_left"> 
     <div class="pad"> 
      Left Column Top<br/> 
      <br/> 
      Div only as long as content.<br/> 
     </div> 
     <div class="pad"> 
      Left Column Bottom<br/><br/> 
      I want this DIV to stretch all the way down to the bottom of the container regardless of the lenght of the content. 
     </div> 
    </div> 
    <div id="column_middle"> 
     <div class="pad"> 
      <p>Long Middle Content</p> 
      <p>Long Middle Content</p> 
      <p>Long Middle Content</p> 
      <p>Long Middle Content</p> 
      <p>Long Middle Content</p> 
      <p>Long Middle Content</p> 
      <p>Long Middle Content</p> 
      <p>Long Middle Content</p> 
      <p>Long Middle Content</p> 
     </div> 
    </div> 
    <div id="column_right"> 
     <div class="pad"> 
      Right content<br/><br/> 
      I want this DIV to stretch all the way down to the bottom of the container regardless of the lenght of the content. 
     </div> 
    </div> 
</div> 
</body> 
</html>

除了主要的问题，如果你注意中间列的宽度，这不是50.我想50％的第一，当然，归纳起来为100％，但对于一些疯狂的原因一切都搞砸了：

Distorted layout

任何人都知道这是为什么？

我不能用表格做的另一件事，甚至不知道它是否可能：我想整个布局是对称的。也就是说，我希望较长的内容可以确定其div的宽度，也可以确定其他div的宽度，而中间div可以延伸至100％的页面。任何人都知道是否有可能？不知道我是否真的在最终布局中使用它，但这令我感到困惑。

对不起，如果问题是愚蠢的，结果很容易解决。就像我说的，我是新的正确的HTML/CSS。任何帮助表示赞赏。

来源

2011-04-08 Ariel

好吧，所以算了一部分。在某些浏览器中，除了指定的宽度外，您的边框也是如此。通过减少你的中间div为49％，它固定在IE8/IE7/FF4下的正确的div被推下。下面是它在行动：JsFiddle

来源

2011-04-08 00:55:42 Adrian

增加容器的宽度从680到750，它正在....

来源

2013-05-18 10:02:54 user2396528

如何从适当的宽度和高度改变表格到div的布局？

回答

相关问题