0

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

这是小提琴的css：

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

我想实现同样的目标，但我希望右 div 具有固定宽度（300px），而左 div 在调整窗口大小时展开/收缩。如果不更改代码中左右 div 的 HTML 顺序，我无法弄清楚如何修复它。我已经尝试过花车和其他属性，但无法使其工作。

谢谢你的帮助！

4

5 回答 5

1

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

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

 .right {

     width: 300px;
     overflow: hidden; }
于 2013-01-04T00:47:29.517 回答
1 
.container {
  position: relative;
}
.left { 
  background-color: #DDD;
  margin-right: 300px;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
于 2013-01-04T01:00:18.967 回答
0

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

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

主要的是float: right;

于 2013-01-04T00:59:48.680 回答
0

检查这个：

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;

}
​

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

于 2013-01-04T07:53:47.387 回答
0

更新了 jsFiddle

浮动对于保持两个元素彼此相邻很重要。我在左边添加了 310 像素的边距（右边DIV300 像素，DIV空白 10 像素）。然后我用一个负数margin-left将右边拉到DIV那个边距的顶部。

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

于 2013-01-04T08:42:51.560 回答