文章/答案/技术大牛

发布

社区首页 >问答首页 >Xhtml和Div/Floating

问Xhtml和Div/Floating
EN

Stack Overflow用户

提问于 2011-05-21 16:39:36

回答 1查看 165关注 0票数 0

我试着把两个div放在一起--在同一行上，休息一下，然后有另一个完整的块div。

这是我到目前为止所掌握的

主体代码

<body>
    <div class="noFloat">
        <div class="square bgBlue ltFloat">I'm Blue</div>
        <div class="square bgGreen ltFloat">I'm Green</div>
    </div>  
    <div class="dvCenter">I'm in the middle</div>
    <div class="dvCenter">I'm in the middle</div>
</body>

css

body {
    background-color: red;
}
.square {
    width: 100px;
    height: 100px;
}
.bgBlue {
    background-color: blue;
}
.bgGreen {
    background-color: green;
}
.dvCenter {
    float: none;
    margin: auto;
    width: 300px;
    background-color: purple;
}
.ltFloat
{
    float: left;
}
.noFloat
{
    display: block;
    float: none;
}

我很难理解为什么它不能正常工作。非常感谢您的帮助:-)

通过中断，我打算让两个左侧浮动的div不与居中的div共享水平空间。

xhtml

css-float

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-05-21 17:03:23

将.noFloat规则更改为

.noFloat
{
    display: block;
    float: none;
    overflow:auto;
    clear:both;
}

http://jsfiddle.net/gaby/53vVP/1上的演示

或者，您可以在.dvCenter规则上设置clear:left;。

http://jsfiddle.net/gaby/53vVP/上的演示

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6080616

复制

相似问题

问Xhtml和Div/Floating
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Xhtml和Div/FloatingEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Xhtml和Div/Floating
EN