0

私のページの次のチャンクがあります。
スタイル：

.featuredcontainer {

width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
}



.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
}

そしてHTMLの例：

<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>

ページが表示されたとき。navcontainerは（そうあるべきですが）右側にありますが、featuredcontainerの下にあります。相対位置を使用してnavcontainerを上に移動すると、正しく見えますが、ページの下部にたくさんの空きスペースがあります。私は何をしますか？

4

5 に答える 5

1

nav と注目のコンテナーの両方を別のラッパー div に配置します。

HTML

<div class='wrapper'>
    <div class="navcontainer">
        menu
    </div>
    <div class="featuredcontainer">
        content
    </div>
</div>

そして、すべての相対位置を取り除きます。このような基本的なレイアウトの問題では、相対配置はお勧めしません。代わりにフロートを使用してください。ラッパーには固定幅が必要です。これにより、margin: 0 auto で適切に中央に配置できます。

CSS

.wrapper{
    width:752px;
    margin: 0 auto;
    overflow:auto;
}
.featuredcontainer {
    width: 450px;
    height: 700px;
    float:left;
    border: 1px groove grey;
}
.navcontainer{
    float:left;
    height: 600px;
    width: 300px;
    background:#ff0;
}

JSFiddle http://jsfiddle.net/5w5SC/

于 2012-07-09T18:12:54.523 に答える
1

次のように、2 つの div を「ラッパー」div で囲みます。

<div id="wrapper">
    <div class="featuredcontainer">content</div>
    <div class="lessonnavcontainer">menu</div>
</div>

次に、それらを中央に配置するには、ラッパーにマージンを追加します。

#wrapper { margin: 0px auto; }

次に、2 つの div を並べて配置するには、float を追加します。

.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }

センタリングを機能させるには、ラッパーで幅を宣言する必要があります。

#wrapper { width: 800px; }
于 2012-07-09T18:13:49.503 に答える
0

floatプロパティを使用します。float を使用すると、css は div を水平方向に並べて配置できます。

.featuredcontainer {

width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}



.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}

これが出発点です。float left または float right を使用して、何が起こるかを確認してください。思い通りになるまでいじってください。

于 2012-07-09T18:06:52.430 に答える
0

それらを並べて取得するには、CSS に float 属性を追加する必要があります。ページ幅に合わせてサイズを変更するには、相対的な幅を追加する必要があります。それらをページの中央に (水平に) 配置するには、html 内の相対的に配置された div 内に div を配置する必要があります。ここにフィドルがあります。http://jsfiddle.net/Ne5zs/

于 2012-07-09T18:12:42.213 に答える
0

浮動オブジェクトには必ず clearfix を導入してください (この手法には 多くの バージョンがあります)。 次に、 を使用してそれらを含むブロック要素を中央に配置します。margin: 0 auto

于 2012-07-09T18:14:31.110 に答える