代码之家 › 专栏 › 技术社区 › Iznogood

我可以在CSS中浮动身体吗?

css-float css html

Iznogood · 技术社区 · 15 年前

我不擅长融合它的疯狂。我漂浮了很多我的东西,发现每当我开始漂浮一些东西时,我就不得不漂浮它的容器和它的容器,因为否则容器就会倒塌。

所以现在看看我的网站,它是一个相当不错的马厩,但如果我在身体上加一个边界,我会发现它在顶部是1倍高,身体里的所有东西都在外面。如果我让身体漂浮,那么一切看起来都很好,但是:

1-这是个糟糕的设计,我该怎么做?

2-如果可以的话,我该如何使身体居中?我用保证金:自动。但一旦身体漂浮起来,它就停止工作了。

这是我的CSS。

    body {
    width: 960px;
    font-size: 13px;
    margin: auto;
    margin-top: 20px;
    border: 1px #000 solid;
}

.wrapper {
    float: left;
    width: 960px;

}

.header {
    float: left;
    width: 960px;
    border: 1px #000 solid;
    margin-bottom: 20px;
}

.menu {
    width: 960px;
    float: left;
    border: 1px #000 solid;
}

.sidebar {
    width: 260px;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}

.content {
     border: 1px #000 solid;
   margin-left: 20px;
    margin-top: 20px;
    width: 620px;
    float: left;
    padding: 10px;
}

.footer {
    border: 1px #000 solid;
    width: 960px;
    float: left;
    margin-top: 20px;
}

布局文件:

<body> 
        <div class="wrapper"> 
            <div class="header"> 
                <h1>HEADER</h1> 
            </div> 
            <div class="menu"> 
                <ul> 
                    <li><a href="/">Home</a></li> 
                </ul> 
            </div> 
            <div class="sidebar"> 
                sidebar
            </div> 
            <div class="content"> 
                    <h1>Content</h1> 
            </div> 
            <div class="footer"> 
                 <h1>FOOTER</h1> 
            </div> 
        </div> 
    </body>

无论如何,希望我是清白的。

3 回复 | 直到 15 年前

BoltClock 15 年前

将浮动替换为 overflow: auto 在里面 .wrapper 它应该工作得很好。然后你可以把它放在中间 margin: auto :

.wrapper {
    overflow: auto;
    margin: auto;
    width: 960px;
}

此外,移除 width: 960px 和 边缘:汽车 从 body 因为你不再需要它们了。

swilliams 15 年前

如果你把你的集装箱 overflow 到 auto 或 hidden 你不应该把它也浮起来(除非你出于其他原因)。例如:

<div id="container">
   <div id="left">Content! this should be floated left</div>
</div>

#container { overflow: auto; border: 1px solid #000; }
#left { float: left; }

应该有 container 以边框显示所有内容。

Rob 15 年前

是的,浮动所有这样的元素是糟糕的设计和滥用浮动元素。学习元素的自然流动和CSS位置的正确使用是非常值得的。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前