Question

我一直在为我的朋友的网页制作CSS布局，遇到了一些问题。也许，你将能够帮助我。

第一个问题是我的css似乎没有在我的1px bg文件中承认“repeat-y”。当我硬编码“高度”值时，它确实做到了，但由于项目是MVC3并且内容是动态生成的，所以我无法做到这一点。我做的是运行javascript函数“onload”，测量填充div并为有问题的“repeat-y”div设置正确的高度。解决方案并不完美，因为它在没有“repeat-y”的情况下加载页面，并且仅在加载完成时加载它们，因此存在明显的变化。你对如何制作纯CSS有任何想法吗？

第二个问题更令人讨厌的是，当我最终开始显示“repeat-y”时，“内联块”破了（我猜）。现在它看起来像这样：http://dl.dropbox.com/u/1201937/CSS.png。所以中间的div被推倒了。位移不是恒定的。当我加载一个内容多三倍的页面时，它实际上变得更小了。但我并没有改变这是不可接受的事实。

现在有些代码：

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

非常感谢任何帮助。谢谢！

PS。哦。问题是跨浏览器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;
}

CSS内联块问题

1 个答案: