顶部的 CSS 位置层 - 边距和填充，溢出问题

Question

编辑：问题已解决..

我将 red_are div 放在 content_box 中，对于高度，我通过 jquery 获取它，然后将其位置设置为 margin-top:-(red_area HEIGHT + content_nox PADDING)px; ..

..如果有人有更好的想法，请分享..

---

我正在尝试制作一个内容容器，其中我将在 RED div 的顶部有一个图标或文本（在代码中），问题是 RED div 在下一个 DIV 上溢出，我想要的是“content_box”应该根据 RED div 的高度自动下降。第二个问题是 RED div 的位置，目前我设置了 margin-bottom:-50px;但我想要的是，它会自动计算高度并将其定位在顶线（边框）上方的中间（垂直）.. 下面是我的代码并尝试.. 感谢您的帮助..

以下是我想要实现的..

参考：http://jsfiddle.net/Dvej8/

代码：

  <div class="cb_container">
    <div class="red_area">          
       text <br />
       text <br />
       text <br />
       text <br />
       text <br />
       text <br />
       text <br />
       text <br />
    </div>
    <div class="content_box">
      <h3>Title of Container</h3>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>

Answer 1

这是一个纯 CSS3 的解决方案，不需要任何 JQuery（在 Chrome、Safari 和 Firefox 上测试）并响应我想分享的可变高度的 red_area。

JSFiddle Here

纯 CSS 解决方案的主要问题是基于百分比的计算是基于对象的高度（例如，margin-top: 50% 添加的间距等于宽度的 50%，而不是高度）。另一个问题是 content_box 还需要识别 red_area 的高度，如果没有 JQuery，这似乎是不可能的。

此解决方案使用两个技巧来克服这些障碍：

1. Transform 的 translateY() (CSS3) 可以移动 div相对于其高度。

2. 两个相邻的 div（没有边距）看起来是一个 div，即使有边框（经过正确调整）

相关 CSS：

.content_box {
    padding:25px;
    border-right:1px SOLID #e4e4e4;
    border-bottom:1px SOLID #e4e4e4;
    border-left:1px SOLID #e4e4e4;
    border-radius:2px;
}
.red_area_container {
    border-right:1px SOLID #e4e4e4;
    border-top:1px SOLID #e4e4e4;
    border-left:1px SOLID #e4e4e4;
    height:50%;
    transform: translateY(50%);
    -ms-transform: translateY(50%);
    -webkit-transform: translateY(50%);
}
.red_area {
    display:block;
    margin:0 auto;
    text-align:center;
    background:red;
    width:50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

我们用 div 包裹 red_area。然后我们将 red_area 向上平移 50% 的高度，使其与顶部边框居中。然后我们将 red_area_container 向下平移 50% 以考虑 red_area 创建的额外空间。由于我们设置边界的方式，结果看起来像一个 div。尝试在 red_area 中添加/删除内容——这个解决方案可以解决这个问题！

想出这个解决方案有点有趣:)

Answer 2

如果我是正确的，你想这样做：

http://jsfiddle.net/Dvej8/2/

正确吗？

我删除了.red_area 中的margin-bottom: -50px。这就是问题所在。 Margin: 0 auto; 足够放在中间了。

编辑：将padding 添加到容器顶部并设置margin-bottom。我可以问你为什么想要那个吗？我有兴趣。无论如何，这就是它的方式：

http://jsfiddle.net/Dvej8/4/

Answer 3

<div class="cb_container">
    <div class="red_area">
        <ol>
            <li>
                <p>text</p>
           </li>
           <li>
               <p>text</p>
           </li>
            <li>
               <p>text</p>
           </li>
            <li>
               <p>text</p>
           </li>
            <li>
               <p>text</p>
           </li>
       </ol>
   </div>
   <div class="content_box">
       <p>More text within here blah blah</p>
   </div>
</div>

CSS：

p,h3{margin:0px;padding:2px;}
.cb_container{
    width:400px;
}
.red_area{
    background:#FF0000;
    width:70%;
    margin:auto;
    position:relative;
    top:50px;
}
.red_area>ol{
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.content_box{
    border:1px solid #CCCCCC;
    padding:50px 10px 10px 10px;
}