当前位置：文江博客话题详情

CSS 清除浮动

发布于 2024-12-13 07:04:53 字数 508 浏览 2 评论 0原文

我有一个关于 css clear float 的问题。

我的问题是，当我向所有页面声明 div{float:left;} 时，那么在某些部分，我仍然想要屏幕的一些 div 显示中心，例如 width:960px;margin :0 自动。如何清除这个div的浮动？

请参阅以下位置的代码： http://jsfiddle.net/37wnT/ 并在 http://jsfiddle.net/37wnT/show/

我需要 div#nav 和div#content 这两个div位于屏幕中心，但其他div仍然遵守规则float:left;

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沉默的熊 2024-12-20 07:04:53

我稍微修改了你的代码。看看吧。

<html>
<head>
<style>
div.main{float:left;}
#header{width:100%;height:100px;}
#nav{clear:both;width:800px;margin:0 auto;}
.nav{width:200px;text-align:center;font:16px/150%;}
#wrap{width:100%;height:100%;}
#content{clear:both !important;width:960px;height:100%;margin:0 auto;}
.col{width:300px;height:300px;margin:0 10px 0 10px;background:red;display:block;}
</style>
</head>

<body>

<div id="header">
    <div id="nav">
        <div class="nav main">home</div>
        <div class="nav main">info</div>
        <div class="nav main">products</div>
        <div class="nav main">cantact</div>
    </div>
</div>
<div id="wrap">
    <div id="content">
        <div class="col main" >ds</div>
        <div class="col main">ds</div>
        <div class="col main">ds</div>
    </div>
</div>
</body>
</html>

I have modified your code little bit. take a look.

<html>
<head>
<style>
div.main{float:left;}
#header{width:100%;height:100px;}
#nav{clear:both;width:800px;margin:0 auto;}
.nav{width:200px;text-align:center;font:16px/150%;}
#wrap{width:100%;height:100%;}
#content{clear:both !important;width:960px;height:100%;margin:0 auto;}
.col{width:300px;height:300px;margin:0 10px 0 10px;background:red;display:block;}
</style>
</head>

<body>

<div id="header">
    <div id="nav">
        <div class="nav main">home</div>
        <div class="nav main">info</div>
        <div class="nav main">products</div>
        <div class="nav main">cantact</div>
    </div>
</div>
<div id="wrap">
    <div id="content">
        <div class="col main" >ds</div>
        <div class="col main">ds</div>
        <div class="col main">ds</div>
    </div>
</div>
</body>
</html>

回复收藏 0 原文

农村范ル 2024-12-20 07:04:53

这是新的 jsfiddle

<div id="content">
    <div class="col">1</div>
    <div class="col" >2</div>
    <div class="col" style="clear:left;margin-top:10px">3</div><br> <-- changes here
</div>

我不确定这是否是您想要的。

This is the new jsfiddle

<div id="content">
    <div class="col">1</div>
    <div class="col" >2</div>
    <div class="col" style="clear:left;margin-top:10px">3</div><br> <-- changes here
</div>

I am not sure if this is what you want.

回复收藏 0 原文

~没有更多了~