CSS 内联 block 问题

Question

我一直在为我 friend 的网页设计 CSS 布局，遇到了一些问题。也许，你能帮我解决这些问题。

第一个问题是我的 CSS 似乎没有在我的 1px bg 文件上确认“repeat-y”。它在我对“高度”值进行硬编码时发生了，但这不是我能做的事情，因为该元素是 MVC3 并且内容是动态生成的。我所做的是运行 javascript 函数“onload”，测量填充的 div 并为有问题的“repeat-y”div 设置正确的高度。该解决方案并不完美，因为它在没有“repeat-y”的情况下加载页面，并且仅在加载完成时加载它们，因此存在明显的变化。您对如何使其成为纯 CSS 有什么想法吗？

第二个有点烦人的问题是，当我终于开始显示“repeat-y”时，“inline-block”坏了(我想)。现在看起来像这样:http://dl.dropbox.com/u/1201937/CSS.png .所以中间的div被压低了。位移不是恒定的。当我加载一个包含三倍内容的页面时，它实际上变小了很多。但我不会改变这是 Not Acceptable 事实。

现在一些代码:

HTML:

<div class="contentMid">
    <div id="leftHeight" class="contentML">
    </div>
    <div id="measuredDiv" class="contentM">
        @RenderBody()
    </div>
    <div id="rightHeight" class="contentMR">
    </div>
</div>

CSS:

.contentMid 
{
    white-space:nowrap;
    display:inline-block;
    float:left;
    clear:left;
}

.contentMid .contentML
{
    background-image: url("/content/images/content-shadow-l.png");
    background-repeat: repeat-y;
    width:30px;
}

.contentMid .contentMR
{
    background-image: url("/content/images/content-shadow-r.png");
    background-repeat: repeat-y;
    margin-left:2px;
    width:25px;    
}

.contentMid .contentM
{
    padding: 0px 10px 20px 10px;
    background-color:#f5f5f5; 
    margin-left:2px; 
    width:949px;
}

如果有人感兴趣，这是 JS 脚本。

function fixHeights(){
    document.getElementById("leftHeight").style.height = document.getElementById("measuredDiv").offsetHeight + "px";
    document.getElementById("rightHeight").style.height = document.getElementById("measuredDiv").offsetHeight + "px";
}

任何帮助将不胜感激。谢谢!

附言。哦。问题是跨浏览器FF/IE/Ch

JSFiddle 示例:http://jsfiddle.net/the_r/ZEw5M/ .注意删除 JS 脚本时会发生什么。内容没有移位，但是你看不到左右的阴影

Answer 1

将此添加到 css:

.contentMid:after{
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}