0

divWeb サイトの同じ「行」に2 つの を揃えるにはどうすればよいですか?

私はこのページに取り組んでおり、ウェブサイトの左側に浮かぶメニューと、その横にあるコンテンツを取得しようとしました.

divこれをの CSSとして使用してみました:

.menu
{
    width:25%;
    height:auto;
    margin-bottom:2px;
    float:right;
    position:fixed;

}
.content
{
    width:70%;
    height:50%;
    margin-bottom:2px;
    padding: 25px;
    float:right;
}

ページはそれらを並べてフローティング表示するのではなく、代わりにhttp://www.exorithm.com/などのほとんどの Web サイトに、サイドバーとコンテンツ用の領域があります。誰でも助けることができますか？

すべての私のコード: http://pastebin.com/KqYkrweE

4

2 に答える 2

2

問題は、メニューに position:fixed があることだと思います。position fixed または absolute を使用すると、ドキュメント フローから要素が削除されるため、float:right は無関係になります。

編集：これは同じ結果を達成するためのより良い例です

また、幅にパーセンテージを使用し、ピクセルベースのパディングを適用していることにも注意してください。これにより、要素がページに対して幅が広すぎて、一方が他方の下に表示される可能性があります。

70% + 25% = 95% with 5% left over.

5% が 50px 未満の場合 (幅全体が 1000px になる)、列の合計が幅全体よりも大きくなります。より良いアプローチは、パーセンテージベースのパディングを使用するか (これがどのように機能するか 100% 確実ではありません)、次のようにフローティング列内の要素にパディング、マージン、ボーダーを適用することです。

// CSS
.leftCol {
    float:left;
    width:25%;
}

.rightCol {
    float:left;
    width:75%;
}

.content {
    padding:25px;
}

// Markup
<div class="leftCol">
    <div class="menu">
        Here is my menu
    </div>
</div>
<div class="rightCol">
    <div class="content">
        Here is my content
    </div>
</div>

編集 2: ユーザーが下にスクロールしてもメニューを画面に表示したままにしたい場合は、 position:fixed がその役割を果たします。あなたのページを確認しましたが、固定幅のナビゲーションが 206px に設定されているようです。したがって、既存のマークアップのスタイルは、次のようにしたほうがよいでしょう。

// CSS
.menu {
    position:fixed;
    left:0;
    top:0;
    width:206px;
}

.content {
    padding: 25px 25px 25px 231px;
}
于 2012-12-04T15:40:42.960 に答える
0
  1. あなたは左ではなく右に浮かんでいます。
  2. .content両側に 25 ピクセルのパディングがあります。つまり、全体で 50 ピクセルになります。menu25% と70% であるためcontent、コンテナーが 1000px より小さい場合、スペースが不足します。
于 2012-12-04T15:39:04.827 に答える