1

htmlコードは次のとおりです。

<div id="wrapper">
<div id="ads">...</div>
<div id="content">...</div>
</div>

ページに列のような div を配置する方法は知っていますが、ads div の後にコンテンツ div がすべてのスペースを埋めることは可能ですか? 明らかな解決策の 1 つは、以下の回答のように、ads-div を content-div に配置することです。しかし、問題が 1 つあります。コンテンツ div には、プレーン テキストだけでなく、他の HTML コードを含めることができます。したがって、たとえば、スタイル「幅: 100%」で内部 div を配置すると、100% はコンテンツ div のすべての幅を意味し、ads-div には注意を払いません。2 つの div を分離しておくことでこれを達成することは不可能だと思います。デモのスクリーンショットを参照してください。 ここに画像の説明を入力

4

4 に答える 4

2

広告が content 内にあるように、要素を再配置できます<div>。たとえば、この JSFiddleを参照してください。

<div id="wrapper">
    <div id="content">
        <div id="ads">...</div>
        Lorem ipsum ...
    </div>
</div>

CSS の場合:

#ads {
    width: 100px;
    height: 200px;
    background-color: red;
    float: right;
}
#content {
    width: 100%;
    height: 100%;
    background-color: yellow;
}
于 2013-10-28T08:28:37.500 に答える
1

ページ上の要素をフローティングしても、それを達成するのに役立ちません。必要に応じて、使用できますdisplay: flex;

デモ

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrap {
    display: flex;    
}

.first {
    width: 80%;
    background: #f00;
}

.second {
    width: 20%;
    background: #00f;
}

または、レガシー ブラウザのサポートを検討している場合はdisplay: table;、display: table-cellそれぞれ と を使用することを検討してください...

デモ

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrap {
    display: table;    
    width: 100%;
}

.first {
    width: 80%;
    display: table-cell;
    background: #f00;
}

.second {
    width: 20%;
    display: table-cell;
    background: #00f;
}
于 2013-10-28T08:26:42.440 に答える
0

私はこれを試しましたが、div ではありませんが、私の場合は段落と div を使用しました。

これも試すことができます

<div id="wrapper">
  <div id="content">
  <div id="ads">...</div>
  <p>
  //your content
  </p>
  </div>
</div>

インラインCSSを使用したくない場合は、追加してください

#ads{
float:right
width:200px;
}

チェック ( http://jsfiddle.net/q8NJk/ )

必要に応じてパディングまたはマージンを取得できます

于 2013-10-28T08:27:31.727 に答える