0

このレイアウトは、ナビゲーション (「左」) と実際のサイト コンテンツ (「右」) の 2 つの要素で構成されています。

今私が欲しいのは、「左」の div はそのままですが、画面を特定のサイズに縮小するときに、コンテンツの div の幅をそれに合わせて縮小したいと考えています。

ただし、開始方法がわかりません。レスポンシブ Web デザインを調べると、多数の div とパーセンテージを含むレイアウト全体のスケルトンしか見つかりませんが、これは 1 つの div のみに必要で、完全に混乱しています。

これは私が今持っているものです：

.right {
    width: 750px;
    margin: 40px 0 40px 50px;
    float: left;
    position: relative;
}

.left {
    margin: 40px 0px 40px 40px;
    width: 210px;
    float: left;
    position: relative;
}
4

2 に答える 2

0

あなたが求めているのは、まさにレスポンシブ デザインではありません。私があなたを正しく理解していれば、パーセンテージ幅が必要になります。

HTML:

<div id="left">
    <a href="#">Nav1</a> <br>
    <a href="#">Nav2</a> <br>
    <a href="#">Nav3</a> <br>
    <a href="#">Nav4</a> <br>
</div>

<div id="right">
    This is where the main content will go.
</div>

CSS:

body { margin: 0; padding: 0; }

#left {
    width: 20%;
    height: 100%;
    background: red;
    float: left;
    text-align: center;
}

#right {
    width: 80%;
    height: 100%;
    background: blue;
    float: left;
    text-align: center;
}
于 2013-06-13T15:13:02.903 に答える
0

このhttp://jsbin.com/uquzaw/1/が圧倒されすぎないことを願っています。

基本的に、探している効果を得るには、css にパーセンテージが必要であり、html にメタ タグが必要です。

于 2013-06-13T14:53:41.137 に答える