Question

我用这张图来解释：

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

所有方格都是<div>。具有相同颜色的div属于同一父div。黄色和绿色的div是好的。问题是内容div的高度可能会有所不同，我需要红色div始终保持在“6”方块旁边，如图所示，但内容div的高度使我无法做到，因为如果它增长，红色div下降，反之亦然（但内容div的高度永远不会超过“6”方）。

另一方面，绿色div的高度也可能不同，因此给红色div一个绝对位置将无法修复它。我需要红色div来“跟随”总是“6”方块。我尝试了许多方法但没有成功。

非常感谢任何帮助。谢谢！

重要编辑：

好的，好的，好的！抱歉!我道歉！！我看到我要提供更多细节！这是棘手的事情：我绘制的布局仅适用于主页！黄色和红色divs将在除了home之外的任何页面上消失，只有绿色div和内容将保留（这就是为什么内容永远不会更进一步，这只是在主页上，在其他页面上它确实更进一步）。因此，我不能制作一张桌子，或将“6”方格放在红色的div中。

Answer 1

使用<table> ?!然后，各行中的所有<td>元素都保持正确关联，如果一个高度增长，它将向下推并保持正确的关联。有时，当<table>表现得很好时，与html / css打架是不值得的。

Answer 2

尝试在其他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}

Answer 3

为什么不将7,8和6 div包裹在父div中，然后将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;
}

Answer 4

这是一个快速而肮脏的方法，假设蓝色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>

CSS：我需要安排＆lt; div> s以一种非常具体的方式但无法弄清楚（看图像）

4 个答案: