Question

看看我发现的这个小提琴，并调整结果窗口的大小：http://jsfiddle.net/qPHgR/286/

这是来自小提琴的css：

.left { 
    float: left;
}
.right { 
    background-color: #DDD;
    overflow: hidden;
}

我想实现同样的目标，但我希望正确的div具有固定的宽度（300px），并且在调整窗口大小时左边的div可以展开/收缩。我无法弄清楚如何在不改变代码中左右div的HTML顺序的情况下修复它。我已经尝试过漂浮物和其他物品，但无法使其发挥作用。

感谢您的帮助！

Answer 1

这个怎么样： http://jsfiddle.net/7DKX8/2

.left {
    float: left;
    background-color: #DDD; } 

 .right {

     width: 300px;
     overflow: hidden; }

Answer 2

.container {
  position: relative;
}
.left { 
  background-color: #DDD;
  margin-right: 300px;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}

Answer 3

这是你想要的吗？ http://jsfiddle.net/3ZUas/

文字会干扰，但这就是你想要的吗？

主要是float: right;

Answer 4

检查一下：

HTML：

<div class="container">
    <div class="left">
        some text goes here which is just here to change
    </div>    
    <div class="right">
        some longer bunch of text to go here, it should stick to the right some longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the right
    </div>
</div>

CSS：

.left { 
    float: left;
margin-right: 300px;
    border: 1px solid #000;
}
.right { 
position: absolute;
    right: 0;
    width: 300px;
    background-color: #DDD;
    overflow: hidden;

}

希望这对你有用......！

Answer 5

<强> Updated jsFiddle

浮子对于保持两个元素彼此相邻非常重要。我在左侧DIV右侧添加了310像素的边距（右侧DIV为300像素，白色空间为10像素）。然后，我使用了一个否定的margin-left将DIV拉到了该边距之上。

我还在overflow: hidden;上添加了DIV.container来说明简单的浮动控制解决方案。如果不需要，可以删除它，但您可能会发现它使您的布局样式的其余部分更容易。

自动扩展div的宽度

5 个答案: