2

私は説明するためにこの図面を作成しました：

http://rdt.org.ni/here/for_stackoverflow.png

すべての正方形は<div>'sです。同じ色のdivは、同じ親divに属します。黄色と緑色のdivは問題ありません。問題は、コンテンツdivの高さが変化する可能性があることです。図面のように、赤いdivを常に「6」の正方形の横に配置する必要がありますが、コンテンツdivの高さにより、コンテンツdivの高さが大きくなると、赤いdivが表示されなくなります。下降し、その逆も同様です（ただし、コンテンツdivの高さが「6」の正方形を超えることはありません）。

一方、緑のdivの高さも変化する可能性があるため、赤のdivに絶対位置を指定しても修正されません。常に「6」の正方形を「フォロー」するには、赤いdivが必要です。私は成功せずに多くの方法を試しました。

どんな助けでも大歓迎です。ありがとう！

重要な編集：

OK、OK、OK！ごめん！謝罪します！！もっと詳しく説明しなきゃ！トリッキーなことは次のとおりです。私が描いたレイアウトはホームページ専用です。黄色と赤のdivは、ホーム以外のページでは消え、緑のdivとコンテンツのみが残ります（そのため、コンテンツはこれ以上進むことはなく、ホームページだけにあり、他のページではさらに進みます）。したがって、私はテーブルを作ることも、赤いものと一緒にdivに「6」の正方形を置くこともできません。

4

4 に答える 4

0

<table>?!を使用します。次に、さまざまな行のすべての<td>要素が互いに適切に関連付けられたままになり、高さが大きくなると、押し下げられて適切な関連付けが維持されます。<table>意志がうまく機能するときに、それを機能させるためにhtml/cssと戦う価値がない場合があります。

于 2012-11-07T23:32:31.217 に答える
0

そのようなコンテンツの他のdiv内にdivを作成してみてください

<div id="content_out">
    <div id="content_in">
    </div>
</div>

そしてCss

#content_out{
//set the exact size
width:
height:}
#content_in{
//the size inside here can vary}
于 2012-11-07T23:39:58.067 に答える
0

7、8、および 6divを parentdivでラップしてから、それfloatを左または右にラップしてみませんか?

次に、clear:bothonをポップしdiv 5ます。

HTML

<div class="parent">
    <div id="7"></div>
    <div id="8"></div>
    <div id="6"></div>
</div>

CSS

div#5 {
    clear: both;
}
于 2012-11-07T23:46:05.547 に答える
0

これは、青い div のコンテンツが div 4 + 5 の高さを超えないことを前提とした、簡単で汚いアプローチです (コンテンツが本当に動的/可変である場合、これは適切なアプローチではありません)。

実際の使用には適したソリューションではありませんが、1 つのアプローチを見ることができます。

CSS

#outer_wrapper { position: relative; width: 700px; margin: 20px auto; background-color: gray; }

#yellow div { background-color: yellow; text-align: center; }
#blue { background-color: blue; text-align: center; }
#green div { background-color: green; text-align: center; }
#red div { background-color: red; text-align: center; }

#yellow div { float: left; width: 220px; margin: 0 20px 20px 0; }
#blue { clear: left; width: 460px; }
#green { float: right; width: 220px; }
    #green div { margin-bottom: 20px; }
#red { position: absolute; bottom: 0px; clear: left; }
    #red div { float: left; width: 220px; margin-right: 20px; }

.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

HTML

<div id="outer_wrapper" class="group">
    <div id="green" class="group">
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div style="margin-bottom: 0px;">6</div>
    </div>

    <div id="yellow">
        <div>1</div>
        <div>2</div>
    </div>

    <div id="blue">
Sample text<br />
Sample text<br />
Sample text<br />
    </div>

    <div id="red">
        <div>7</div>
        <div>8</div>
    </div>
</div>
于 2012-11-08T00:09:36.613 に答える