Question

因此，我正在制作一个练习网站，并测试我到目前为止所学到的内容，而且我似乎已经碰壁了。我的css有问题（我相信）。我要做的是让<main>和<section>元素在<header>下面彼此相邻浮动。

我的问题是，当我将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%;
        }

Answer 1

这里有一个折叠容器的情况。包含浮点数的元素在计算其高度时不会将它们考虑在内（除非浮点数被清除）。

您还会注意到，<header>和<ul>发生了这种情况，因为您的<nav>和<li>也正在浮动。

有几种方法可以解决这个问题。有些人使用“清除漂浮物”。黑客攻击。我建议不要使用这个黑客。

更好的方法是简单地为周围的容器分配overflow: hidden;。

我建议你把所有内容都包装成一个包装div。然后将该overflow: hidden;样式指定为div。这应该照顾它。

以下是一个例子：

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

将CSS添加到<section>正在对其大小进行不必要的更改

1 个答案: