添加CSS到<section>正在不必要改動的<body>

的大小，以便我在做練習的網站，並測試出我所學會爲止，我似乎已經撞南牆。我遇到了我的CSS問題（我相信）。我試圖做的是讓<main>和<section>元素相互浮動，在<header>的下面。添加CSS到<section>正在不必要改動的<body>

我的問題是，當我的CSS添加到<section>它改變了<body>的大小到<header>的大小，然後同時<main>和<section>浮體下面。我花了數小時研究並試圖做出調整，可能有所幫助，而且我沒有運氣。

我的另一個問題是你覺得我試圖讓我的網站（半）響應自己超前自己？畢竟這是我的第一頁。我現在應該堅持像素還是點？

任何幫助或建議將不勝感激。謝謝

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset = "utf-8"> 
    <title>Home</title> 
    <link rel = "shortcut icon" href = "images/favicon.ico"> 
    <link rel = "stylesheet" href = "styles/sharedstyles.css"> 
    <link rel ="stylesheet" href="styles/homestyle.css"> 

</head> 

<body> 
    <header> 
     <img id="logo" src="images/logo.png" alt="B-more Neighborly Logo" height="181" width="273"> 
     <nav id="nav_menu_3"> 
     <ul> 
      <li><a href="index.html" >Home</a></li> 
      <li><a href="pages/donate.html">Local Donations</a></li> 
      <li><a href="pages/volunteer.html">Volunteer</a></li> 
      <li><a href="pages/other.html">Other Ways You Can Help</a></li> 
      <li><a href="pages/contact.html">Contact Us</a></li> 
     </ul> 
     </nav> 
    </header> 


    <main> 
     <h1>This page will contain:</h1> 
      <p> Gibberish dsfhaskdjfhaslkjdhfaslkjdhfaklsjdhfasjhdfajshdfjsahdfjssskljbsbsaksjhdfkashfkjashdfkjashdfkjashdfkasjhdfaksjhdfaksjhdfkajshdlfjhasdjhfalskdjfhalsjdhflasjhdflkajshdflajshdflkjashdfljkhasldjfhaskjdhfalsjkdhfalksjhdfajkshdfkajshdflkajshdflashdflajshdfashdfhasldkjfhasldfhaskdflaskdjhfalsdjhfalksflasjkdhfalskjhdflaskjdhfalskjdhflaksdjhflaskjdhfalskjdhfalsjkdhflasjkdhflsakjdhflasdjfhalsdjfhalsdjkhfalsdjhf 
      </p> 
    </main> 

    <section> 
     <p><img src="images/skyline.jpg" alt="Baltimore Skyline" height="300" width="431"></p> 
     <p><img src="images/hands.jpg" alt="Helping Hands" height="300"  width="431"></p> 
    </section> 
</body> 
</html>

這是CSS。我已將我在homestyle.css文件中的少量文件添加到底部以便於閱讀

body{ 
    background-color: #bae2c2; 
    border: 2px solid black;/**/ 
} 

header{ 
    height:16em; 
    width:100%; 
} 

#logo{ 
    margin:1em; 
} 

#nav_menu_3{ 
    float:right; 
    margin-top:4em; 
    margin-right:5em; 
} 
#nav_menu_3 ul { 
    list-style: none; 
} 
#nav_menu_3 ul li { 
    float: left; 
} 
#nav_menu_3 ul li a { 
    text-align: center; 
    display: block; 
    width: 210px; 
    height:35px; 
    padding: 1em 0;  
    text-decoration: none; 
    background-color: #CC7814; 
    color: white; 
    font-weight: bold; 
    border-right: 2px solid white; 
} 

#nav_menu_3 ul li a:hover, #nav_menu_3 ul li a:focus { 
    background-color:#6f19ff; 
} 



p { 
    font-family:"Arial"; 
    font-size:"20px"; 
} 




/*here is the CSS i believe is causing me the problems*/ 

main{ 
      float:left; 
      height: 40%; 
      width: 40%; 
     } 
section{ 
      float:left; 
      height:50%; 
      width:40%; 
     }

來源

2016-11-17 acm818

你需要清除浮動的高度由它們的容器來解釋。閱讀https://css-tricks.com/all-about-floats/ –

這裏有一個摺疊容器的例子。包含浮點數的元素在計算高度時不考慮它們（除非浮點數被清除）。

您還會注意到，這是你的<header>和你<ul>發生，因爲你的<nav>和你<li> s的也正在實行。

大約有這幾個方面。有些人使用'清除浮動'黑客。我建議不要使用這個黑客。

更好的方法是簡單地分配周圍的容器overflow: hidden;。

我建議你將所有內容包裝到包裝div中。然後將該div分配給overflow: hidden;樣式。這應該照顧它。

下面是一個例子：

body{ 
 
    background-color: #bae2c2; 
 
    font-family:"Arial"; 
 
    font-size: 12px; 
 
} 
 
.wrapper { 
 
    overflow: hidden; 
 
    padding: 1em; 
 
    border: 1px solid black; 
 
} 
 
header { 
 
    border: 1px solid green; 
 
    overflow: hidden; 
 
} 
 
#logo { 
 
    width: 100px; 
 
    margin:1em; 
 
    float: left; 
 
} 
 
#nav_menu_3 ul { 
 
    list-style: none; 
 
    overflow: hidden; 
 
    border: 1px solid purple; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#nav_menu_3 ul li { 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#nav_menu_3 ul li a { 
 
    text-align: center; 
 
    display: block; 
 
    width: 100px; 
 
    height:25px; 
 
    padding: 1em;  
 
    text-decoration: none; 
 
    background-color: #CC7814; 
 
    color: white; 
 
    font-weight: bold; 
 
    border-right: 2px solid white; 
 
} 
 
#nav_menu_3 ul li a:hover, #nav_menu_3 ul li a:focus { 
 
    background-color:#6f19ff; 
 
} 
 
main { 
 
    float:left; 
 
    width: 40%; 
 
    margin-right: 1%; 
 
} 
 
section { 
 
    float:left; 
 
    width:40%; 
 
}

<div class="wrapper"> 
 
    <header> 
 
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" id="logo" /> 
 
    <nav id="nav_menu_3"> 
 
     <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="pages/donate.html">Local Donations</a></li> 
 
     <li><a href="pages/volunteer.html">Volunteer</a></li> 
 
     <li><a href="pages/other.html">Other Ways You Can Help</a></li> 
 
     <li><a href="pages/contact.html">Contact Us</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
    <main> 
 
    <h1>This page will contain:</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi voluptatibus quae inventore alias labore sed aliquam necessitatibus id deserunt error, modi magni ea ipsa, natus quod libero odio a quos.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam error obcaecati esse delectus amet ullam laborum perferendis consequatur vitae, debitis magni accusamus sequi officia, sapiente est provident. At, quas obcaecati.</p> 
 
    </main> 
 
    <section> 
 
    <p><img src="https://placekitten.com/300/100" alt="" /></p> 
 
    <p><img src="https://placekitten.com/g/300/100" alt="" /></p> 
 
    </section> 
 
</div>

來源

2016-11-18 03:02:50 haltersweb

添加CSS到<section>正在不必要改動的<body>

回答

相關問題