2

我画了这张图来解释：

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

所有的正方形都是<div>'s。颜色相同的 div 属于同一个父 div。黄色和绿色的 div 没问题。问题是内容 div 的高度可以变化，我需要红色 div 始终保持在“6”方块旁边，如图所示，但内容 div 的高度阻止我这样做，因为如果它增长，红色 div下降，反之亦然（但内容 div 的高度永远不会超过“6”方块）。

另一方面，绿色 div 的高度也可能不同，因此给红色 div 一个绝对位置并不能解决它。我需要红色 div 始终“跟随”“6”方块。我尝试了很多方法都没有成功。

任何帮助将不胜感激。谢谢！

重要编辑：

好好好！对不起！我道歉！！我知道我必须提供更多细节！这里有一个棘手的问题：我绘制的布局仅适用于主页！黄色和红色 div 将在除主页以外的任何页面上消失，只有绿色 div 和内容会保留（这就是为什么内容永远不会走得更远，那只是在主页上，在其他页面上它确实走得更远）。因此，我无法制作表格，也无法将“6”方块与红色方块放在一个 div 中。

4

4 回答 4

0

使用<table>？！然后<td>，各行中的所有元素保持适当的相互关联，如果一个元素的高度增加，它将向下推并保持适当的关联。有时不值得与 html/css 进行斗争以使其在 a<table>会做得很好的情况下工作。

于 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 和 6 包装div在 parentdiv中，然后将其包装在float左侧或右侧？

然后，弹出一个clear:both。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 的高度（如果内容是真正动态/可变的，这不是一个好方法）。

对于实际使用来说不是一个好的解决方案，但您可以看到一种方法：

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 回答