0

テキスト本文の最大幅をたとえば30emにする1列のレイアウトにしたいのですが、できるだけ広くする必要があります（最大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

コンテンツの最大幅にマージンの最大幅の2倍を加えたサイズのメディアクエリを使用します。

.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 に答える