0

我想要一个单列布局，其中文本正文的最大宽度应该是 30em，但它应该尽可能宽（最多 30em）。

左边距（文本正文左边缘和浏览器窗口左边缘之间的空白区域）最多应为 6em，并在必要时缩小（在较小的屏幕上）。

右边距应使用可用的剩余空间。

我见过这个问题：我需要一个 max-margin CSS 属性，但它不存在。我怎么能假装呢？- 但我不明白如何在我的情况下使用它。这就是我尝试过的（http://jsfiddle.net/y2rd8/1/）

<div class="left"></div>
<div class="right"></div>
<div class="body">
A wonderful serenity has taken possession of my entire soul,
</div>
<div style="clear: both;" />

和

.left, .right {
    background: gray;
}

.left {
    float: left;
    max-width: 6em;
}
.right {
    float: right;
    width: auto;
}

.body {
    max-width: 30em;
    border: 1px solid green;
}
4

2 回答 2

3

我会选择你所拥有的东西，但可能会远离浮动并完全消除.left，.right然后使用媒体查询来管理左边距：

http://jsfiddle.net/y2rd8/9

.body {
    max-width: 30em;
    border: 1px solid green;
    margin-right: 1em;
}
@media screen and (max-width: 480px) {
    .body {
        margin-left: 2em;
    }
}
@media screen and (min-width: 481px) {
    .body {
        margin-left: 4em;
    }
}
于 2013-03-27T13:49:24.243 回答
0

Use a media query with size of max width of content plus two times the max width of the margin.

.body {
    max-width: 30em;
    border: 1px solid green;
    margin: auto;
}
/* 42em = 30 + (2*6) */
@media screen and (min-width: 42em) {
    .body {
        margin-left: 6em;
    }
}

http://jsfiddle.net/schettino72/j9HpH/1/

于 2014-06-30T08:48:37.983 回答