樣式問題（使用浮點數）

我在想爲什麼段落標籤內容填充在兩個浮動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; 

} 
}

來源

2014-12-06 Robbie Fikes

你需要清除浮動：

p { 
    clear:both;  
}

Fixed fiddle。

More on clear to be read at MDN。

至於第二個問題，HTML忽略所有的空白，包括換行符和回車符，將它們摺疊成一個空格。要有換行符，可以使用<br>插入中斷元素，或使用</p>正確結束段落元素。

或者，您也可以通過在您的CSS中的p元素上設置whitespace:pre來修改空白處理，但這幾乎不是您想要的。只需關閉段落，以獲得實際的段落。

來源

2014-12-06 01:22:18

清除，如果你想在p到下一行的浮動，因此它可以清除浮動，這樣

<p style='clear:both'> 
    Lorem ipsum... 
</p>

http://jsfiddle.net/yf3nyfk1/2/

來源

2014-12-06 01:24:54

樣式問題（使用浮點數）

回答

相關問題