Question

我正在寻找解决方案。我有一个CSS样式的页面。该页面是使用Rails生成的。该布局包含div id="wrapper用于修复网站宽度和margin: 0 auto的内容。

我的问题详情：

有一个标题部分，一个导航部分和容器（以及oc。页脚）。容器有两列。内容和rightSideBar。

好的，我开始在内容区域生成动态内容。此页面是关于预测。我有一张摊位中的塔罗牌，然后每张卡片再次循环扔掉以获得卡片含义的解释。

内容区域顶部的展开框：

div#spread_box {
 width:620px; 
 background-color:#392b3f; 
 margin: 15px 15px 10px 10px; 
 display:block; 
 overflow:auto;  
 position:relative; 
 clear:both;}

我在其中有图像，我希望在一个地方完美定位，所以我使用绝对定位。

div#spread_box img  {border: 1px solid #000000; display: block; height: 120px; position: absolute; width: 71px;}

div#spread_box #kelta1  {left: 115px; top:168px;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); z-index: 500;}
div#spread_box #kelta2  {left: 115px; top:168px;}
div#spread_box #kelta3  {left: 115px; top:45px;}
div#spread_box #kelta4  {left: 115px; top:291px;}
div#spread_box #kelta5  {left: 20px; top:168px;}
div#spread_box #kelta6  {left: 210px; top:168px;}
div#spread_box #kelta7  {left: 310px; top:395px;}
div#spread_box #kelta8  {left: 310px; top:270px;}
div#spread_box #kelta9  {left: 310px; top:145px;}
div#spread_box #kelta10 {left: 310px; top:20px;}

这是传播盒。 正如您所看到的，我使用定位技术将它放在正确的位置。比Rails生成的内容数据要好。每个块都有一个class="card_detail"。在这里有三件事：<p>中的一个简短文字详细说明了这个位置。在两列中的卡片的图片和它的解释。

因为这是数据库生成的内容，所以我使用了浮动技术。

div.explanation_box     { width:600px; background-color:#392b3f; border: 1px solid #000; margin: 15px 15px 10px 10px; text-align:justify; padding: 10px; overflow:auto;}
div.explanation_box p   { width:475px; }
div.explanation_pos     { margin:5px; display:block;}
div.explanation_pos p   { width:575px; }
div.explanation_card    { width:100px; float:left;}
div.explanation_img     { margin:5px; width:100px; float:left;}
div.explanation_pos img { width:100px; }

有一个名为explain_box的容器框，其中包含固定的width和overflow:auto属性。 explain_box位于正常的工作流程中，包括浮动定位元素。

我的问题的症状

如果我给spread_box（容器元素）一个确切的height:600px;，那么一切都很好。但是，如果我只显示一张卡片，那么将会有一个巨大的未使用区域。
如果我带走了传播盒的高度参数，那么整个事情就消失了！
如果移除了overflow:auto选择器，则浮动元素将在绝对定位元素下移动。
如果我使用溢出自动和固定高度的px大小比出现的内容小，那么右侧的滑块将会被裁剪。

最后的问题

那么，我怎样才能使spread_box的动态高度包含固定的展开位置？

spread_box的内容取决于发送数据的FORM。因此，从单张卡到真正复杂的传播，都可以实现。这就是我需要这个的原因！

Answer 1

在查看最后一张图片时首先想到的是，看起来你没有“clearfix”，换句话说，所有你的浮动之后的下一个元素（最好是在每个的末尾）大型包装容器：

<div style="clear: both; height: 1px;"></div>

这将作为一个大墙，将所有飞行物保持在其给定元素内。如果您已经在使用它，或者它是否有效/不适合您，请告诉我们！

Answer 2

首先，将overflow: auto更改为overflow: hidden以删除任何滚动条的可能性。

由于您的卡绝对定位，并且所有卡的高度在一起变量，您需要才能工作出卡的总高度。然后，您需要在#spread_box上设置此计算高度。

您可以在两个地方之一计算身高：

在您的Ruby代码中。您知道要输出哪些卡片，并且您知道每张卡片的高度和top值。这可能很难做到，但有一个优点，即如果JavaScript被禁用它将起作用，这将我带到下一个选项..
使用JavaScript。这是解决问题的最简洁方法。有些JavaScript，甚至几行jQuery都可以计算出卡片的高度。

基本CSS（定位vs浮动）我无法弄清楚

2 个答案: