Question

我正在制作一个包含品牌徽标和导航的标题。标题本身包含在一个名为container的div中。标记就像 -

<div class="container">
    <div class="head">
        <div class="brand>Brand Name</div>
        <div class="nav'>Nav content Here</div>
    </div>
</div>

我使用的CSS就像

.container{
    width:100%;
    margin:10% auto;
}
.head{
    float:left;
    width:100%
}
.brand{
    float:left;
    margin:0 3%;
    width:auto;
}
.nav{
    float:right;
    margin:0 3%;
    width:auto
}

问题是所有内容都流出Main container <div>，容器的高度为0px。内容显示为我想要的内容，但主容器的高度为0px。

我想并排展示品牌标识和导航。如果你可以使代码变得小巧，那将是很棒的。提前谢谢。

编辑：很抱歉在发布问题之前没有进行研究。 Clearfix黑客是一个救生员，但也有几种不同的方式。在此列出 - https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing

Answer 1

您可以使用clearfix hack解释here

HTML：

<div class="container clearfix">
<div class="head">
    <div class="brand">Brand Name</div>
    <div class="nav">Nav content Here</div>
</div>

的CSS：

.container{
    width:100%;
    margin:10% auto;
}
.head{
    float:left;
    width:100%
}
.brand{
    float:left;
    margin:0 3%;
    width:auto;
}
.nav{
    float:right;
    margin:0 3%;
    width:auto
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Fiddle here

Answer 2

你必须像这样使用.container div的clearfix： Demo 来自动清除浮动的子元素。

<div class="container clearfix">
  <div class="head">
    <div class="brand">Brand Name</div>
    <div class="nav">Nav content Here</div>
  </div>
</div>

此处更正了HTML语法错误

Answer 3

您遇到html问题：

<div class="brand>Brand Name</div>

并

<div class="nav'>Nav content Here</div>

我修好了这些并且它很好！不改变你的`css

<div class="container"> <div class="head"> <div class="brand">Brand Name</div> <div class="nav">Nav content Here</div> </div> </div>

<强> jsFiddle

Answer 4

    <div class="brand>Brand Name</div>
    <div class="nav'>Nav content Here</div>

更改为

<div class="brand">Brand Name</div>
<div class="nav">Nav content Here</div>

CSS Floats在标题中不起作用

4 个答案: