0

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

----------------------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 或浮动的组合。我宁愿避免媒体查询的古怪组合，但如果这是我能得到的最好的，我会接受。

如果做不到，一个可接受的答案将提供一些关于如何考虑这样一个布局问题的见解，这样我将来就不必浪费太多时间了:)

顺便说一句——它只需要适用于最新的 Firefox 和 Webkit 浏览器——IE 对于这个应用程序并不重要。

4

2 回答 2

1

您可以使用 CSS媒体查询来实现您的目标。在此处查看现场演示。

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;
    }
}
于 2013-07-16T03:38:09.513 回答
0

此选项尝试模仿表格。

我的 jsFiddle 使用的比例器比您需要的要小，这只是一个示例。#content我还添加了一个小 jQuery，以便在单击时将内容添加到DIV，以便您可以看到最大宽度的工作。

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

我添加了min-heightandbackground-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>
于 2013-07-16T02:48:36.790 回答