CSS 布局和边框问题答案

【问题标题】：CSS Layout and border issueCSS 布局和边框问题
【发布时间】：2012-11-07 19:22:31
【问题描述】：

我在网页中遇到了一些奇怪的布局/定位问题。它主要与浮动的项目和不正确流动的容器边框有关。我试过清除和溢出：自动，隐藏，但它仍然不起作用。

非常感谢。

【问题讨论】：

你的问题到底是什么？
你有什么问题？？

【解决方案1】：

将overflow: auto; 添加到.explore-inner

.explore-inner {
border: 1px solid #EBEBEA;
background: url(../images/inner-bg.png) repeat-x;
overflow: auto;
}

【讨论】：

您好，感谢您的建议。我密切关注所有提示并使用溢出和清除，布局看起来好多了。但是domainandseo.com/porfolio/villa/index.html底部还有一个背景图片问题（bg被剪短了，有空白）domainandseo.com/porfolio/villa/index.html类似的背景问题谢谢

【解决方案2】：

您的<ul> 项目有浮动，这未正确清除。在.explore-inner 中的<ul> 项目之后，您有一个clear: both;

【讨论】：

【解决方案3】：

添加以下css

.explore-inner:after{
    content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
clear:both;

}

因为“ul”有浮动，所以需要在“explore-inner”类之后清除

【讨论】：

【解决方案4】：

实际上你在你的child div's 中使用了floating 而不是cleared 你的parent div's 所以我已经把overflow:hidden 给了你的父母div 所以它现在工作正常......

所以你可以用我的更新你的css 我希望这对你有用：-

CSS

.explore-inner {
    background: url("../images/inner-bg.png") repeat-x scroll 0 0 transparent;
    border-top: 1px solid #EBEBEA;
    overflow: hidden;
}
#team-message {
    background: url("../images/outer-bg.png") repeat-x scroll 0 0 transparent;
    clear: both;
    overflow: hidden;
    padding: 10px;
    width: 940px;
}

【讨论】：