0

我正在尝试使用固定宽度和有弹性的 CSS 内容，类似于在Google Calendar上看到的内容。我认为使用 min-width 和 max-width 很容易实现这一点，但是我遇到了简单地坚持最小宽度而不是拉伸到最大值的子元素的问题。

可以在这里看到一个演示。

4

3 回答 3

1

无论如何，您实际上不需要设置最小/最大宽度。

http://jsfiddle.net/UyZ6T/1/

问题基本上是float: left;在stretch-1上。你只需要在固定尺寸的部分。它的基本意思是：“我现在在左边，其他一切都在右边”。具有 float 属性的 div 会尝试占用尽可能少的空间，以便其余部分可以拉伸。

于 2012-07-28T16:28:57.153 回答
1

从. float:left_ 小提琴#stretch-1

于 2012-07-28T16:34:52.813 回答
0

您实际上是在尝试创建一个包含固定宽度元素的流体布局，您需要在所有父元素上设置百分比宽度，以使其像谷歌日历一样工作 - 将您的 css 更改为以下

#container {
max-width:1280px;
min-width:260px;
    width:90%;
height:200px;
margin:auto;
background:#000;
}

#fixed-1 {
width:200px;
height:200px;
float:left;
background:#3fb44a;
}

#stretch-1 {
min-width:60px;
    width:20%;
height:200px;
float:left;
background:#c44d58;
}

#sub-content {
width:100%;
height:20px;
background:#4788ef;
}

​</p>

于 2012-07-28T16:43:37.623 回答