0

これは基本的なhtml+cssの質問かもしれませんが、私が解決するのはちょっと考えられています：S

ほら、「3列」のレイアウトが必要です。中央の列（たとえば10emの幅）と、両側に1つずつ（たとえばそれぞれ2emの幅）の2つの列が必要です。画面中央に3つ欲しい...

それぞれを個別に宣言して、どうすればよいですか？つまり、次のようなことをします。

<div class="left"><!-- 2em width --></div>
<div class="central"><!-- 10em width --></div>
<div class="right"><!-- 2em width --></div>

それらを別のコンテナに進化させずにそれを行う方法はありますか？

どうも！

4

3 に答える 3

2

私が同様の解決策を探していたとき、これは私を非常に助けました：http: //matthewjamestaylor.com/blog/perfect-3-column.htm

于 2012-11-25T20:03:21.910 に答える
1

あなたは彼らにパーセント幅を与えることについてどう思いますか？

.left {
    margin-left: 15%;
    width: 10%;
}
.central {
    width: 50%;
}
.right {
    width: 10%;
    margin-right: 15%;
}
div { float: left; height: 100%; }
body { height: 1000px;}

15 + 10 + 50 + 10 + 15=100だからです。

JsFiddleも追加しました：http：//jsfiddle.net/VjbFz/

私はまだそれらを容器に包むことがより良い解決策だと思います。

于 2012-11-25T20:00:56.947 に答える
0

これを試して：

HTML：

<body>
    <div id="container">
        <div class="left"><!-- 2em width --></div>
        <div class="central"><!-- 10em width --></div>
        <div class="right"><!-- 2em width --></div>
        <div class="cleaner"></div>
    </div>
</body>

CSS：

body {
    text-align: center;    
}

.cleaner { clear: both; }

#container {
    margin: 0 auto;
    width: 14em;
    text-align: left;
}   

.left { width: 2em; float: left; }
.central { width: 10em; float: left; }
.right { width: 2em; float: left; }​

.cleanerはフロートのためだけにここにあります。

JsFiddleにも追加しました：http：//jsfiddle.net/jmzWr/

お役に立てば幸いです:)

于 2012-11-25T22:15:36.950 に答える