css - 基本 CSS(定位与 float )我想不通的

Question

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

我的问题详情:

---

有一个页眉部分、一个导航部分和容器(以及页脚)。容器有两列。内容和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 生成的内容数据。每个 block 都有一个 class="card_detail" .其中有 3 件事: <p> 中的短文本详细说明了职位。在那下面的两栏中是卡片的图片及其说明。

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

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; }

有一个名为 explanation_box 的容器框，带有固定的 width和一个 overflow:auto属性(property)。 explanation_box 在正常工作流中，包括 float 定位元素。

我的问题的症状

---

1. 如果我给出一个确切的 height:600px;到 spread_box(容器元素)比一切都好。但是，如果我只显示一张卡，那么将会有一个巨大的未使用区域。

2. 如果我去掉展开框的高度参数，那么整个东西都消失了!

3. 如果 overflow:auto选择器被移除， float 元素上升，在绝对定位元素之下。

   

4. 如果我使用 overflow auto 和 px 尺寸小于显示内容的固定高度，则右侧将出现 slider ，内容将被裁剪。

最后的问题

---

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

spread_box 的内容取决于发送数据的FORM。因此，可以有从单张卡到非常复杂的点差的所有内容。这就是我需要它的原因!

Answer 1

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

由于您的卡片是绝对定位的，并且所有卡片的高度可变，您需要工作出卡片的组合高度。然后，您需要在 #spread_box 上设置计算出的高度。

您可以在两个地方计算高度:

• 在您的 Ruby 代码中。您知道要输出哪些卡片，并且知道每张卡片的高度和 top 值。这可能很难做到正确，但它的优点是它可以在禁用 JavaScript 的情况下工作，这让我想到了下一个选项。
• 使用 JavaScript。这是解决您的问题的最干净的方法。一些 JavaScript，甚至只是几行 jQuery可以计算卡片的高度。