1

右側にサイドバーを使用するウェブサイトがあります。そのサイドバーは、CSSスタイルとして「float：right」を使用しています。

説明として、画像の周りにテキストが浮かんでいるコンテンツをメインに追加するのが好きです。これらの画像には「float：right」も使用しており、期待どおりに機能します。

次のように、画像を含むテキストのいくつかのセクションを互いに追加すると、課題が始まります。

1st text   +-----+
text text  | img |
           +-----+

2nd text   +-----+
text text  | img |
           +-----+

デフォルトでは、2番目の段落は、次のように1番目の段落の終了直後に開始されます。

1st text   +-----+
text text  | img |
2nd text   +-----+
text text
           +-----+
           | img |
           +-----+

私は、段落の間にある明確なスタイルを使用して、段落を分離しておく必要があることを学びました。これは、説明されているように機能します。

img+textブロックごとに使用するコードは次のとおりです。

<div>
<img style="float:right" src="animg.png" width="502" height="241" alt="bla bla">
<p>Text for the image.</p>
<div style="clear:right"></div>
</div>

ただし、サイドバーで問題が発生し始めます。サイドバーが左側にclear：rightが表示されている場所よりも下に下がっている場合は、サイドバーまでコンテンツにギャップが生じます。ここで効果を確認できます：サイドバーがclear：rightに影響を与えるWebサイトの例

これに対処する方法、つまり、clear：rightがサイドバーの高さの影響を受けず、ローカルのテキストと画像のブロックによってのみ影響を受けることを回避するための提案はありますか？

これまでに見つけた提案の1つは、サイドバーにfloatを使用せず、代わりにテーブルを使用することです。しかし、それは新しい問題につながります（たとえば、HTMLコンテンツの順序を変更しない限り、サイドバーが左側に表示され、画面が小さいなどの新しい問題が発生する可能性があります）。

4

2 に答える 2

1

コンテンツ領域とサイドバーは別々のdivタグに入れる必要があります。

<body>
    <div>Header</div>
    <div>Content</div>
    <div>Sidebar</div>
</body>

コンテンツを左に、サイドバーを右にフロートさせます。次に、これらの各セクション内に必要な数の要素を追加できます。HTMLが整形式であり（つまり、必要なときに終了タグが欠落していない）、すべてが親の幅内にある限り、問題は発生しません。

編集：

静的なサイドバーと流動的な（弾性の）メインエリアがあるため、少し複雑になります。まず、から右側の余白を削除し、次を#main追加します。

overflow-y: hidden;

次に、divのを次のように変更margin-rightします。boxes

margin: 0 2em;

それはあなたのために問題を分類する必要があります。

于 2012-10-10T14:48:58.990 に答える
0

コードをお楽しみください。

HTML：

<div class="main">
    <div class="box-one">Your content here</div>
    <div class="box-two">Put photo here</div>
    <div class="clear"></div>

CSS：

.clear{
    clear:both;
}
.main{
    width:100%;
    background:#424242;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
}

.box-one{
    width:260px;
    background:#FFF;
    float:left;

}
.box-two{
    width:100px;
    background:#FFF;
    float:right;

}
于 2012-11-02T15:23:47.003 に答える