标签: 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.

如果我的HTML说明了以下内容

<div class="container">
 <div class="element">
 </div>
 <div class="element">
 </div>
 [...]
 <div class="element">
 </div>
</div>

然后可以将这些元素对齐,就像它们在两列表格中一样吗？即7个元素,将有4行,最后一行只有一个元素.

(元素本身没有特殊的类或id,如右,左等).

在2011年,我被困在2列布局中.我感到惭愧.;)

挑战是提出这个:

+--------------------------------------++----------------+
| This is a header with potentially    || button div     |
|                                      ||                |
| long text that will wrap most likely |+----------------+
|                                      |
| but can't go under the button to the |
|                                      |
| right                                |
+--------------------------------------+

对于典型的2列布局而言,将左列的边距设置为等于右边的div的边距并不是很重要.然而,这个特定例子中的变量是,我不知道在任何给定时间右边的div有多宽(它基于一行不同的文本.

总之,我需要:

• 2列布局
• 两列都占据了整个宽度
• 右侧的列与其包含的文本一样宽
• 左边的列和剩余的空间一样宽

看起来我以前不得不建造这个,但我很难过.

我对CSS,JS或jQuery解决方案持开放态度.

编辑:

实际上,我已经可以看到一个相当简单的jQuery解决方案.我可以在右边抓取div的渲染宽度,然后做一些数学从父容器的宽度减去该宽度,然后设置左列的宽度相同.如果没有干净的CSS选项,那将是我的后备计划.

我希望建立一个将由WYSIWYG编辑器使用的两列布局.示例:http://taurean.io/labs/clearcut-theme/essay.html

我有两列布局.因为我们想要支持的所有浏览器都不支持flex布局,所以我使用display: table和display: table-cell.

我目前的问题是,如果我修改顶部填充#sidebar > div > div,MAIN内容会受到影响,但不应该.所以有两个问题:

• 为什么会MAIN受到#sidebar > div > div顶部填充变化的影响？
• 我怎样才能实现它不受影响？

HTML

<div id="wrapper">
    <div id="sidebar">
        <div class="inner">
            <div>TEST</div>
            <div>TEST</div>
            <div>TEST</div>
            <div>TEST</div>
        </div>
    </div>
    <div id="content">
        <div class="inner">MAIN</div>
    </div>
</div>

CSS

body {
    background: #ecf0f1;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
*, *:before, *:after {
    box-sizing: border-box;
}
#wrapper {
    display: table;
}
#sidebar {
    display: table-cell;
    background: #2c3e50;
    color: #ecf0f1;
    width: 200px;
} …