Question

我很奇怪为什么段落标记内容填写在两个浮动的div之间？我希望段落标记的内容位于标题下方。另外，为什么段落标记中的行返回不显示？

HTML：

<body>
<div id="header-container">
    <div id="header-wrap">
        <div class="left logo logoimg">
            <img src="http://i.imgur.com/dtMBhKq.png"/>
        </div>
        <ul class="nav">
            <li class="contact">CONTACT</li>
            <li class="about">ABOUT</li>
            <li class="portfolio">PORTFOLIO</li>
        </ul>
    </div>
</div>
<div>
<p>
Lorem ipsum...
</p>
</div>
</body>

CSS：

body {
background: #000000;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;  
text-align: center;
}

h1 {
font-size: 24px;
color: #FF9000;
}

img {
max-width: 100%;
}

.left {
float: left;
}

ul{
    padding: 0px 0px 0px;
}

.right.nav {
    float: right;
}

/******************************************************************************/
/* Menus */
/******************************************************************************/
#header-container{
margin: auto;
padding: 80px 0px 0px;
max-width: 1160px;
width: 100%;
}

#header-wrap{
padding: 0px 40px 0px;
}

.logo{
max-width: 440px;
width: 100%;
}

ul{
    list-style-type:none;
    display: inline-block;
}

.nav{
float:right;
list-style-type:none;
overflow: hidden;   
}

.nav li{
float:right;
overflow: hidden;
}

.portfolio{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 4px 8px;
margin-left: 0px;
width: 87px;
text-align: center;
}

.about{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 4px 8px;
margin-left: 10px;
width: 60px;
text-align: center; 
}

.contact{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 4px 8px;
margin-left: 10px;
width: 76px;
text-align: center;
}

.orangebutton{
color: #FF9000;
border: 1px solid #FF9000;
margin: 0px 5px 0px;
}

/******************************************************************************/
/* Media Queries */
/******************************************************************************/
@media only screen and (max-width: 867px) {
#header-wrap{
padding: 10px;

}

.right{
float: none;
}

.nav{
float: none;
}

.left {
float: none;
}
.logo{
margin:auto;

}
}

Answer 1

你需要清除花车：

p {
    clear:both;    
}

Fixed fiddle

样式问题（使用浮动）

2 个答案: