Question

我想要一个看起来像这样的布局：

----------------------containing div--------------------------
|              |                              |              |
| left margin  |         content area         | right margin |
| max-width=80 |        min-width=1024        | max-width=80 |
|              |                              |              |
--------------------------------------------------------------

所以期望的行为是

div width < 1024 - 边距区域缩小为0，内容获得水平滚动条
1024 <= div width <= 1184 - 内容区域为1024;边缘区域扩展到80像素。
1184 < div width - 边距区域保持在80像素，内容区域扩展到填充div宽度所需的范围。

我可以在没有JavaScript的情况下使用HTML和CSS实现此功能吗？我对如何安排HTML和CSS有很大的灵活性。所以例如我不介意我是否需要为边距区域，几个嵌套div或浮点组合使用额外的div。我宁愿避免一个古怪的媒体查询组合，但如果这是我能得到的最好的话，我会接受它。

如果无法做到，一个可接受的答案将提供一些关于如何考虑这样的布局问题的见解，以便我不必在将来浪费那么多时间：）

BTW - 它只需要合理的最新Firefox和Webkit浏览器 - IE对于这个应用程序并不重要。

Answer 1

您可以使用CSS media queries来实现目标。观看现场演示here。

HTML

<body>  
<div class="my-div">
    My Div
</div>
</body>

CSS

body, html {
    margin: 0;
    padding: 0;
}

body {
    background: #aaa;
}

.my-div {
    background: #ddd;
}

@media all and (max-width: 1023px) {
    .my-div {
        background: #aaaa99;
        margin: 0 0;
    }
}

@media all and (min-width: 1024px) and (max-width: 1183px) {
    .my-div {
        background: #aa99aa;
        width: 1024px;
        margin: 0 auto;
    }
}

@media all and (min-width: 1184px) {
    .my-div {
        background: #99aaaa;
        margin: 0 80px;
    }
}

Answer 2

此选项试图模仿表格。

我的jsFiddle使用比你需要的更小的比例，并作为一个例子。我还添加了一个小jQuery，以便在单击时向#content DIV添加内容，这样您就可以看到最大宽度正常工作。

http://jsfiddle.net/Kzw7d/2/

我在min-height和background-color中添加了测试和清晰度。

<强> CSS

#app-container {
    width: 100%;
    background-color: blue;
    display: table-row;
}
#content {
    min-height: 800px;
    min-width: 300px;
    max-width: 525px;
    background-color: red;
    word-wrap: break-all;
    display: table-cell;
    text-align: center;}
.margin {
    width: 80px;
    background-color: green;
    display: table-cell;
}

<强> HTML

<div id="app-container">
    <div class="margin"></div>
    <div id="content"></div>
    <div class="margin"></div>
</div>

具有最小宽度内容和最大宽度边距的CSS布局头部划痕

2 个答案:

HTML

CSS