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

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/

正确？

我删除了margin-bottom: -50px中的.red_area。那就是问题所在。 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;
}