Css 两列布局，一列垂直中间

看

需要在ie6工作吗+

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
    </div>
</div>

右内容固定宽度
左内容灵活宽度FFFFFFFFFF

左内容灵活宽度FFFFFFFFFF

左内容灵活宽度FFFFFFFFFF

左内容灵活宽度FFFFFFFFFF

左内容灵活宽度FFFFFFFFFF

左内容灵活宽度FFFFFFFFFF

左内容灵活宽度FFFFFFFFFF

---

如何让右div与左div具有相同的高度，并且内容垂直于中间？

在这里，我添加了

位置；绝对值

到右侧div，删除

float:right

并添加

right:0px

---

给你，我添加了

位置；绝对值

到右侧div，删除

float:right

并添加

right:0px

---

支持IE6，是吗？根据IE6的精神，这里有一个非常不理想的解决方案：|

---

HTML:

<div class="container">
    <div class="left">
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>
        <div class="right-column"></div>
        <div class="right-content">right content fixed width</div>
    </div>
</div>

.right-column {
    width: 180px;
    height: 10000px;
    position: absolute;
    background: #fc0;
    right: 0;
    top: 0;
}
.right-content {
    height: 20px;
    width: 180px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
    text-align: center;
}

.left {
    background: #e8f6fe;
    overflow: hidden;
    padding-right: 180px;
    position: relative;
    zoom: 1; /* hasLayout */
    min-width: 100px;
}

---

它在以下几个部分起作用：

• 应用<代码>缩放：1属性获取

  溢出：隐藏通过hasLayout工作的属性

• 将右列移动到左列的标记中
• 右栏有两个单独的部分
  • 一个非常高的空

    div

    作为柱背景（给人一种柱高相等的错觉）
  • 内容

    div

    ，具有指定的

    高度

    ，用于垂直定位
• 将右列元素绝对定位在相对定位的左列的右上角
• 向左栏添加与右栏宽度相等的右填充（以避免右栏覆盖左栏）
• 根据指定的

  高度垂直对齐右侧内容

• 添加

  最小宽度：100px到左边的列，这样现代浏览器就不会在窗口太小时切断内容

---

注意事项：

• 您需要调整

  的
  高度
  和
  页边距顶部
  。正确的内容

  以适合内容
• 如果右栏的高度大于左栏，则右栏的内容将被截断

---

支持IE6，是吗？根据IE6的精神，这里有一个非常不理想的解决方案：|

---

HTML:

<div class="container">
    <div class="left">
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>
        left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>
        <div class="right-column"></div>
        <div class="right-content">right content fixed width</div>
    </div>
</div>

.right-column {
    width: 180px;
    height: 10000px;
    position: absolute;
    background: #fc0;
    right: 0;
    top: 0;
}
.right-content {
    height: 20px;
    width: 180px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
    text-align: center;
}

.left {
    background: #e8f6fe;
    overflow: hidden;
    padding-right: 180px;
    position: relative;
    zoom: 1; /* hasLayout */
    min-width: 100px;
}

---

它在以下几个部分起作用：
• 应用<代码>缩放：1属性获取

  溢出：隐藏通过hasLayout工作的属性

• 将右列移动到左列的标记中
• 右栏有两个单独的部分
  • 一个非常高的空

    div

    作为柱背景（给人一种柱高相等的错觉）
  • 内容

    div

    ，具有指定的

    高度

    ，用于垂直定位
• 将右列元素绝对定位在相对定位的左列的右上角
• 向左栏添加与右栏宽度相等的右填充（以避免右栏覆盖左栏）
• 根据指定的

  高度垂直对齐右侧内容

• 添加

  最小宽度：100px到左边的列，这样现代浏览器就不会在窗口太小时切断内容

---

注意事项：
• 您需要调整

  的
  高度
  和
  页边距顶部
  。正确的内容

  以适合内容
• 如果右栏的高度大于左栏，则右栏的内容将被截断

---

您的解决方案的问题是，当您调整屏幕大小（较小）时，左div位于右div后面。因此这不是@looping的好解决方案。您的解决方案的问题是，当您调整屏幕大小（较小）时，左div位于右div后面。因此，这不是@looping的好解决方案