Javascript 如何创建没有html表的两列布局？

我已经被告知好几次，我不应该使用表格进行布局设计，但当我不知道如何做一些事情时，我经常会回到表格中

我需要创建一个两列布局。左栏的宽度为300px，右栏占据了页面的剩余宽度。我不知道如何正确地使用纯HTML来实现这一点，我甚至不知道如何使用表来实现这一点

为了让右栏占据剩下的宽度，我似乎需要用一个百分比指定左栏的宽度，这样右栏的宽度可以比左栏的百分比小100%。但我需要左边的列正好是300px

我唯一能想到的就是在运行时用JS计算正确的列的宽度。没有表格和/或Javascript，我怎么能做到这一点呢？

元素基本上占据了容器的宽度，或者说是容器的剩余部分。因此，如果您有一个300px宽的div，那么它旁边的div没有指定宽度，第二个div将填充容器的其余部分。

元素基本上填充了其容器的宽度，或者剩余的部分。因此，如果您有一个300px宽的div，那么它旁边的div没有指定宽度，第二个div将填充容器的其余部分。

在完成之前，我将使用绝对定位：

Html:

如果您希望布局适应内容而不是容器，则有其他选择。如果右栏有更多内容，您可以使用：

#container {
    position: relative;
}

#left {
    position: absolute;
    left: 0px; 
    width: 300px;
    top: 0px; bottom: 0px;
    background: red;
}

#right {
    margin-left : 300px; 
    background: green;
}

如果左列有更多内容，请使用：

#container {
    position: relative;
}

#left {
    width: 300px;
    background: red;
}

#right {
    position: absolute;
    left: 300px; 
    right: 0px;
    top: 0px; bottom: 0px;
    background: green;
}

在找到之前，我将使用绝对定位：

Html:

如果您希望布局适应内容而不是容器，则有其他选择。如果右栏有更多内容，您可以使用：

#container {
    position: relative;
}

#left {
    position: absolute;
    left: 0px; 
    width: 300px;
    top: 0px; bottom: 0px;
    background: red;
}

#right {
    margin-left : 300px; 
    background: green;
}

如果左列有更多内容，请使用：

#container {
    position: relative;
}

#left {
    width: 300px;
    background: red;
}

#right {
    position: absolute;
    left: 300px; 
    right: 0px;
    top: 0px; bottom: 0px;
    background: green;
}

---

将左列设置为300px，将右列设置为100%。。。完成。为了避免任何跨浏览器的奇怪，请按照Matt Ball的链接。他用的是一种神秘的第二种包装，我认为这是不必要的，但是很小的步骤：）

---

一旦进入包装器，要获得列高度=我认为需要将最小高度设置为100%。您可以调整overflow css属性以处理任何文本溢出。非常直截了当的东西，我记得花了很长时间才找到如何做相等的列，包装器是关键。另外，不要为此使用JS，使用JS的人要么在做更高级的事情，要么完全不熟悉html/css。

将左栏设置为300px，将右栏设置为100%。。。完成。为了避免任何跨浏览器的奇怪，请按照Matt Ball的链接。他用的是一种神秘的第二种包装，我认为这是不必要的，但是很小的步骤：）

一旦进入包装器，要获得列高度=我认为需要将最小高度设置为100%。您可以调整overflow css属性以处理任何文本溢出。非常直截了当的东西，我记得花了很长时间才找到如何做相等的列，包装器是关键。另外，不要为此使用JS，使用JS的人要么在做更高级的事情，要么对html/css完全陌生。

。困难在于有了父母

HTML: 您应该注意，两列中较短的一列不会延伸到容器的底部。通常，两列的背景在包含元素上垂直重复

如果需要填充列，我通常会在每个

.column

元素中添加

div.internal

元素，但如果希望避免“divitis”，您可以简单地添加：

.column {
    box-sizing: border-box;
    padding: 20px;
}

对于“流体宽度”列，您所要做的就是确保宽度总和达到100%：

.column-a {
    width: 80%;
}
.column-b {
    width: 20%;
}

。困难在于有了父母

HTML: 您应该注意，两列中较短的一列不会延伸到容器的底部。通常，两列的背景在包含元素上垂直重复

如果需要填充列，我通常会在每个

.column

元素中添加

div.internal

元素，但如果希望避免“divitis”，您可以简单地添加：

.column {
    box-sizing: border-box;
    padding: 20px;
}

对于“流体宽度”列，您所要做的就是确保宽度总和达到100%：

.column-a {
    width: 80%;
}
.column-b {
    width: 20%;
}

---

我过去的目标是：不应该使用表格进行布局design@Madbreaks感谢您提供的宝贵信息。。。你愿意解释而不是重复我显然已经被告知的内容吗？你试过CSS float吗？@AlexFord用表格创建流畅的布局要容易得多。使用表的两个问题是，它不是语义的（表应该包含数据），并且会给HTML添加膨胀。然而，在CSS 3中，你可以使用常规的div，让它们像表格单元格一样工作如果你不能依赖CSS 3，你将不得不努力通过浮动和边距，减少表格的膨胀，但它将是语义HTML，或者，你也可以只是我过去的想法：你不应该使用表格进行布局design@Madbreaks感谢您提供的宝贵信息。。。你愿意解释而不是重复我显然已经被告知的内容吗？你试过CSS float吗？@AlexFord用表格创建流畅的布局要容易得多。使用表的两个问题是，它不是语义的（表应该包含数据），并且会给HTML添加膨胀。然而，有了CSS 3，你可以使用常规的div，让它们表现得像表格单元格。如果你不能依赖CSS 3，你将不得不努力通过浮动和边距，减少表格的膨胀，但它将是语义HTML，或者你可以只是我试过了。一旦两个div向左浮动，它们就不再占据容器的宽度，而是足够宽，只适合其内容。有时，当我这样做时，它会影响潜在的回答者将注意力集中在小问题上