如何在HTML/CSS中创建稳定的两列布局

Question

如何在HTML/CSS中创建稳定的两列布局

Tri*_*nko 51 html css resizable two-column-layout

我想要一个有两列的容器.细节:

容器

宽度应调整为其父元素的100%(容易完成).
高度必须调整为包含两列(即它的高度应该完全等于两列的较大高度,因此没有溢出和滚动条永远不会显示)
应该具有等于左列宽度的两倍的最小尺寸.

一般的列

应该是可变高度,调整到其内容的高度.
应该是并排的,使它们的顶边成一直线.
如果边界,填充或边距的单个像素被应用于任何一个像素,则不应该破坏布局或彼此包裹,因为这将是非常不稳定和不幸的.

左列专门

必须具有固定的绝对宽度(以像素为单位).

正确的专栏

宽度必须填充容器中的剩余空间.换一种说法...
宽度必须等于容器宽度减去左列的宽度,这样如果我在此列中放置一个DIV块元素,将其宽度设置为100%,给它一个类似10px的高度,并给它一个背景颜色,我将看到一个10px高的彩色条带,从左列的右边缘到容器的右边缘(即它填充右列的宽度).

要求稳定

容器应该能够调整大小(通过调整浏览器窗口大小)到最小宽度(前面指定)或更大的宽度而不破坏布局."Breaking"将包括左列改变大小(记住它应该具有固定的像素宽度),右列包裹在左侧,滚动条出现,右列中的块元素未能占用整个列宽并且通常任何上述规范都不能保持真实.

背景

如果使用浮动元素,则右列不应该在左侧包裹,容器将无法包含两列(通过剪切列的任何部分或允许列的任何部分溢出其边界) ),或者那个滚动条会出现(所以我厌倦了建议使用溢出以外的任何东西:隐藏以触发浮动元素遏制).将边框应用于列不应该破坏布局.列的内容,尤其是右列的内容,不应破坏布局.

似乎有一个简单的基于表格的解决方案,但在任何情况下它都会失败.例如,在Safari中,如果容器太小,我的固定宽度左列将收缩,而不是保持我指定的宽度.似乎应用于TD元素的CSS宽度指的是最小宽度,这样如果在其中放置更大的东西,它将扩展.我尝试过使用table-layout:fixed; 没有帮助.我还看到了表示右列的TD元素不会扩展以填充剩余区域的情况,或者它会出现(例如第三列1px宽将被一直推到右侧),但是在右列周围放置一个边框将显示它仅与其内联内容一样宽,并且宽度设置为100%的块级元素不会填充列的宽度,而是匹配内联内容的宽度(即TD的宽度似乎完全取决于内容).

我看到的一个可能的解决方案太复杂了; 我不在乎IE6,只要它适用于IE8,Firefox 4和Safari 5.

Answer 1

ric*_*lla 78

干得好:

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
      /* Change this to whatever the width of your left column is*/
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
      Hello
    </div>
    <div id="right">
      <div style="background-color: red; height: 10px;">Hello</div>
    </div>
    <div class="clear"></div>
  </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

在这里看到它:http://jsfiddle.net/FVLMX/

这是唯一有效的方法，而且非常简单。摘要：左列的float：left和固定像素宽度，右列的width：auto和左边距等于左列的宽度。另外，我在容器上设置了overflow：hidden，因为我已经看到了右列换行。为了将子元素的宽度设置为100％，您必须设置{box-sizing：border-box; -webkit-box-sizing：border-box; -moz-box-sizing：border-box; -ms-box-sizing：border-box;}，以便100％包含其填充和边框以防止溢出。 (2认同)

Answer 2

thi*_*dot 19

我不太关心IE6,只要它适用于IE8,Firefox 4和Safari 5

这让我很开心.

试试这个:现场演示

display: table出乎意料的好.一旦你不关心IE7,你可以自由使用它.它实际上没有任何常见的缺点<table>.

CSS:

#container {
    background: #ccc;
    display: table
}
#left, #right {
    display: table-cell
}
#left {
    width: 150px;
    background: #f0f;
    border: 5px dotted blue;
}
#right {
    background: #aaa;
    border: 3px solid #000
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，6 月前
查看次数：	114563 次
最近记录：	9 年，1 月前