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

Question

编辑:问题已解决..

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

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

---

我正在尝试制作一个内容容器，其中我将在红色 div 的顶部有一个图标或文本(在代码中)，问题是红色 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 中添加/删除内容——这个解决方案可以解决这个问题!

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