【问题标题】:2 column DIV layout [duplicate]2列DIV布局[重复]
【发布时间】:2011-07-22 04:11:19
【问题描述】:

可能的重复:
Simple 2 column div layout
2 column layout in CSS

我想构建一个 2 列的 DIV 布局。其中一列应右对齐并自动调整大小,另一列应填充左侧剩余空间。

【问题讨论】:

标签: css html


【解决方案1】:

喜欢这个http://jsfiddle.net/UNgcd/2/

HTML:

<div class='wrap'>
    <div class='right'>
        <p>some text goes here for auto width</p>
    </div>
    <div class='left'>
        <p>this takes up remaining space to the left</p>
    </div>
</div>

CSS:

.right {
    background-color: red;
    float: right;
    width: auto;
}

.left {
    background-color: yellow;
    overflow: hidden;
}

【讨论】:

  • 为什么设置 'left' 列的 'margin-right' 不起作用?
  • 为我工作jsfiddle.net/UNgcd/3
  • 适用于 Google Chrome 和 FF,但不适用于 IE。
  • 如果我对您问题的处理方法至少是您想要的,您能否为我们所有人澄清一下?也许你也应该澄清你的问题。
  • 是的,这就是我要找的东西,但我现在的问题是将“margin-right”设置为左列,它在 IE 中没有按预期工作
【解决方案2】:

HTML:

<div id="right">Auto sized right div</div>
<div id="left">Auto filling left div</div>

CSS:

#left{
   overflow: hidden;
}

#right{
   float: right;   
}

【讨论】:

猜你喜欢
  • 2019-11-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-04
  • 2016-07-19
  • 2016-07-27
  • 2016-10-31
  • 1970-01-01
相关资源
最近更新 更多