Question

我试图在“内容包装器”中创建两列文本，但是当我在＃box2输入第二个CSS规则“float：left”时，两个列似乎都逃脱了内容包装器。

@charset "UTF-8";


body

{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#000;
    background-color:#ccc;



}

#content {
    background-color:#fff;
    max-width:960px;
    width:auto;
    height:auto;
    border-radius:5px;
    box-shadow:#333;
    margin: 0 auto;

}

#header
{
    width:auto;
    height:auto;    

}

#menu   {
    width:auto;
    margin-top:1%;

}


#menu a{
    text-decoration:none;
    color:#666;
    margin-right:3%;


}

#menu a:hover{
    color:#333;


}

#sidfot1{
    background-color:#999999;
    }

#sidfot2{
    background-color:#854242;
    }

    #overheader h4  {
        color:#854242;
        margin-left:42.5%;

        }

    #overheader h3  {
        color:#854242;
        margin-left:35%;
        padding-top:2%;

        }

#searchbar  {
    width:auto;
    float:right;
    margin:1%;
    }

hr  {
    border-color:#834342;
    }

#box1{
    float:left;
    width:40%;
    margin:3%;

    }

#box2   {
    width:40%;
    float:left;
    margin:3%;

    }

这是html文件：

<!doctype html>
<html>
<head>
<link rel='stylesheet' type="text/css" href='standard.css' />
<meta name="viewport" content="width=device-width, initial-scale=1"/>


<meta charset="UTF-8">
<title>Responsiv Design</title>
</head>

<body>
<div id="content">
<section id="overheader">
<h3>Webbutveckling för mobila enheter</h3>
<h4>Responsiv Webbdesign</h4>
<section id="searchbar"> <input type="text"/> <input type="button" value="Sök"/> </section>
</section>
<header id="header">
<img src="header.jpg" alt="mittuniversitetet">
<section id="menu">
<a href="#">Startsida</a><a href="#">SIDA 2</a><a href="#">SIDA 3</a><a href="#">MIUN</a>
</section>
<hr>

<section id="box1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ullamcorper augue. 
Donec malesuada consectetur urna et laoreet. Mauris aliquet neque a felis consequat sollicitudin. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
Donec justo ligula, sagittis ac orci id, tristique dignissim ligula. Donec hendrerit augue 
vitae massa consequat, nec malesuada metus mattis.</p></section>
<section id="box2">
<p>
Fusce tempus sodales lectus sit amet semper. Ut mollis justo eu nisl bibendum, 
luctus vestibulum nisi accumsan. Donec sed magna felis. Fusce interdum, ligula at 
scelerisque euismod, diam velit pharetra lectus, quis blandit mauris est id libero.
 Integer a viverra nunc, nec efficitur orci. Praesent pellentesque, metus sed tempor ultrices, 
 lorem lectus sagittis mi, ac ultrices mi neque at massa. Phasellus laoreet, nunc ac dapibus fringilla,
  justo metus hendrerit velit, sed euismod enim dui nec massa. Cras fringilla malesuada eros, a vehicula justo semper nec.</p>
</p></section>

</div><!--Div conent ends-->
</body>
</html>

我试图找到解决这个问题的方法，但我不能。我已经添加了清楚：两者，检查名称，规则，拼写等。我减少了列的大小，向右浮动。但我无法找到造成这个问题的原因。

我想我完全失去了它。

/感谢

Answer 1

尝试 - 关闭header代码

body

{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#000;
    background-color:#ccc;



}

#content {
    background-color:#fff;
    max-width:960px;
    width:auto;
    height:auto;
    border-radius:5px;
    box-shadow:#333;
    margin: 0 auto;

}

#header
{
    width:auto;
    height:auto;    

}

#menu   {
    width:auto;
    margin-top:1%;

}


#menu a{
    text-decoration:none;
    color:#666;
    margin-right:3%;


}

#menu a:hover{
    color:#333;


}

#sidfot1{
    background-color:#999999;
    }

#sidfot2{
    background-color:#854242;
    }

    #overheader h4  {
        color:#854242;
        margin-left:42.5%;

        }

    #overheader h3  {
        color:#854242;
        margin-left:35%;
        padding-top:2%;

        }

#searchbar  {
    width:auto;
    float:right;
    margin:1%;
    }

hr  {
    border-color:#834342;
    }

#box1{
    float:left;
    width:40%;
    margin:3%;

    }

#box2   {
    width:40%;
    float:left;
    margin:3%;

    }

<div id="content">
<section id="overheader">
<h3>Webbutveckling för mobila enheter</h3>
<h4>Responsiv Webbdesign</h4>
<section id="searchbar"> <input type="text"/> <input type="button" value="Sök"/> </section>
</section>
<header id="header">
<img src="header.jpg" alt="mittuniversitetet">
<section id="menu">
<a href="#">Startsida</a><a href="#">SIDA 2</a><a href="#">SIDA 3</a><a href="#">MIUN</a>
</section>
  </header>
<hr>

<section id="box1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ullamcorper augue. 
Donec malesuada consectetur urna et laoreet. Mauris aliquet neque a felis consequat sollicitudin. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
Donec justo ligula, sagittis ac orci id, tristique dignissim ligula. Donec hendrerit augue 
vitae massa consequat, nec malesuada metus mattis.</p></section>
<section id="box2">
<p>
Fusce tempus sodales lectus sit amet semper. Ut mollis justo eu nisl bibendum, 
luctus vestibulum nisi accumsan. Donec sed magna felis. Fusce interdum, ligula at 
scelerisque euismod, diam velit pharetra lectus, quis blandit mauris est id libero.
 Integer a viverra nunc, nec efficitur orci. Praesent pellentesque, metus sed tempor ultrices, 
 lorem lectus sagittis mi, ac ultrices mi neque at massa. Phasellus laoreet, nunc ac dapibus fringilla,
  justo metus hendrerit velit, sed euismod enim dui nec massa. Cras fringilla malesuada eros, a vehicula justo semper nec.
</p></section>

</div><!--Div conent ends-->

Answer 2

浮动从流中移除，因此#content的背景颜色不会包含两个浮动列，除非您使用包含机制。如果你不需要可见的溢出，那么只需将溢出：隐藏添加到#content，否则如果你确实需要可见的溢出，那么使用另一种包含技术，例如'clearfix'（google it）网络。

如上所述，您还没有关闭标题元素。

Answer 3

有两种方法可以解决此问题。 1）添加＆＃34; float：left或float：right＆＃34;到＆＃34;内容包装器＆＃34;。 2）在框后添加一个框以添加它的样式＆＃34;清除：两个＆＃34;。喜欢

浮动CSS3故障排除

3 个答案: