CSS浮动，除了正确的位置外都浮动

时间：2017-05-02 07:48:03

标签： html css

我一直绞尽脑汁想要解决这个问题。我不知所措。我已经搜索并尝试了我能找到的大部分解决方案，但没有运气。

我正在建立一个基本网站，作为我自己的业余爱好项目。我试图将页面内容分成两部分;左和右。但是，左边的内容始终位于正确的内容之上。就好像它忽略了float:left;和float: right;命令。

body {
  font-family: 'Noto Sans', sans-serif;
  background-color: #DAA520;
}

#container {
  width: 80%;
  margin: 25px auto;
  background: #fff !important;
  border: 1px solid black;
  border-radius: 10px;
  overflow: auto;
}

.header img {
  padding-left: 30%;
  float: none;
}

.header {
  border-bottom: 5px solid #ccc;
  margin-bottom: 4px;
  height: 300px;
}

.nav ul {
  list-style: none;
  width: 100%;
  margin-top: 25px;
  text-align: center;
}

.nav li {
  float: left;
  width: 24%;
  box-sizing: border-box;
  border: 1px solid black;
  margin-left: 2px;
}

.nav li:hover {
  background: gold;
}

.banner img {
  display: block;
  height: 400px;
  width: 100%;
}

.sub1 h3,
p {
  float: left;
  margin-left: 10px;
  width: 48%;
  display: inline-block;
  position: relative;
}

.sub2 {
  float: right;
  margin-right: 10px;
  width: 48%;
  display: flex;
  display: inline-block;
  position: relative;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/day1.css">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  <title>Bakem and Shakem</title>
</head>

<body>
  <div id="container">
    <div class="header">
      <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo">

      <div class="nav">
        <ul>
          <li>Home</li>
          <li>Recipes</li>
          <li>Contact</li>
          <li>Bakem</li>
        </ul>

      </div>
      <!-- navigation bar divider -->


    </div>
    <!-- header divider -->

    <div class="banner">
      <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner">
    </div>
    <div class="sub1">
      <h3>We make em, you bake em!</h3>
      <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta
        frankfurter.
      </p>

    </div>
    <!-- sub1 divider -->

    <div class="sub2">
      <form class="signup" action="index.html" method="post">
        <h3>Sign up for our news letter</h3>
        <p>Be apart of the bakem family</p>
        <input type="text" name="name" value="name"><label for="email" required>Name</label>
        <input type="email" name="email" value="email" required><label for="email">Email address</label>
      </form>
    </div>
    <!-- sub2 divider -->


  </div>
  <!-- conatiner divider -->


</body>

</html>

主要问题可以在sub1和sub2类中找到。我开始认为它必须是另一个我制定了与这个冲突的规则，我不确定。

4 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
body {
  font-family: 'Noto Sans', sans-serif;
  background-color: #DAA520;
}

* {
  box-sizing: border-box;
}

#container {
  width: 80%;
  margin: 25px auto;
  background: #fff !important;
  border: 1px solid black;
  border-radius: 10px;
  overflow: auto;
}

.header img {
  width: 100%;
}

.header {
  border-bottom: 5px solid #ccc;
  margin-bottom: 4px;
  height: 300px;
}

.nav {
  display: inline-block;
  width: 100%;
}

.nav ul {
  list-style: none;
  width: 100%;
  margin-top: 25px;
  text-align: center;
}

.nav li {
  float: left;
  width: 24%;
  box-sizing: border-box;
  border: 1px solid black;
  margin-left: 2px;
}

.nav li:hover {
  background: gold;
}

.banner img {
  display: block;
  height: 400px;
  width: 100%;
}

.sub1 {
  display: inline-block;
  width: 50%;
  float: left;
}

.sub1 h3,
p {
  margin-left: 10px;
  display: inline-block;
  position: relative;
}

.sub2 {
  float: right;
  width: 50%;
  display: flex;
  display: inline-block;
  position: relative;
}
＆＃13; 
<div id="container">
  <div class="header">
    <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo">
    <div class="nav">
      <ul>
        <li>Home</li>
        <li>Recipes</li>
        <li>Contact</li>
        <li>Bakem</li>
      </ul>
    </div>
  </div>
  <div class="banner">
    <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner">
  </div>
  <div class="sub1">
    <h3>We make em, you bake em!</h3>
    <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta frankfurter.
    </p>
  </div>
  <div class="sub2">
    <form class="signup" action="index.html" method="post">
      <h3>Sign up for our news letter</h3>
      <p>Be apart of the bakem family</p>
      <input type="text" name="name" value="name"><label for="email" required>Name</label>
      <input type="email" name="email" value="email" required><label for="email">Email address</label>
    </form>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您将样式应用于左列中的元素而不是列本身。我只是从那个.sub1风格的规则中删除了o3和p，并且我认为它是你追求的。由于您要渲染的页面大小 - 最好以全屏模式查看运行代码段 - 但您应该看到的是底部的两列内容。

＆＃13;
＆＃13; 
   body {
        font-family: 'Noto Sans', sans-serif;
        background-color: #DAA520;
      }

     #container {
     width: 80%;
     margin: 25px auto;
     background: #fff !important;
     border: 1px solid black;
     border-radius: 10px;
     overflow: auto;
     }

    .header img {
     padding-left: 30%;
     float: none;
       }

    .header {
     border-bottom: 5px solid #ccc;
     margin-bottom: 4px;
     height: 300px;
     }

    .nav ul {
     list-style: none;
     width: 100%;
     margin-top: 25px;
     text-align: center;
     }

    .nav li {
     float: left;
     width: 24%;
     box-sizing: border-box;
     border: 1px solid black;
     margin-left: 2px;
      }

    .nav li:hover {
     background: gold;
      }

     .banner img {
      display: block;
      height: 400px;
      width: 100%;
       }

    .sub1 {
     float: left;
     margin-left: 10px;
     width: 48%;
     display: inline-block;
     position: relative;
      }

    .sub2 {
     float: right;
     margin-right: 10px;
      width: 48%;
      display: flex;
     display: inline-block;
     position: relative;
      }
＆＃13; 
  <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/day1.css">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  <title>Bakem and Shakem</title>
</head>

<body>
  <div id="container">
    <div class="header">
      <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo">

      <div class="nav">
        <ul>
          <li>Home</li>
          <li>Recipes</li>
          <li>Contact</li>
          <li>Bakem</li>
        </ul>

      </div>
      <!-- navigation bar divider -->


    </div>
    <!-- header divider -->

    <div class="banner">
      <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner">
    </div>
    <div class="sub1">
      <h3>We make em, you bake em!</h3>
      <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta
        frankfurter.
      </p>

    </div>
    <!-- sub1 divider -->

    <div class="sub2">
      <form class="signup" action="index.html" method="post">
        <h3>Sign up for our news letter</h3>
        <p>Be apart of the bakem family</p>
        <input type="text" name="name" value="name"><label for="email" required>Name</label>
        <input type="email" name="email" value="email" required><label for="email">Email address</label>
      </form>
    </div>
    <!-- sub2 divider -->


  </div>
  <!-- conatiner divider -->


</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

缩小第二部分的宽度。这两个部分没有空间在一行中。

body {
  font-family: 'Noto Sans', sans-serif;
  background-color: #DAA520;
}

#container {
  width: 80%;
  margin: 25px auto;
  background: #fff !important;
  border: 1px solid black;
  border-radius: 10px;
  overflow: auto;
}

.header img {
  padding-left: 30%;
  float: none;
}

.header {
  border-bottom: 5px solid #ccc;
  margin-bottom: 4px;
  height: 300px;
}

.nav ul {
  list-style: none;
  width: 100%;
  margin-top: 25px;
  text-align: center;
}

.nav li {
  float: left;
  width: 24%;
  box-sizing: border-box;
  border: 1px solid black;
  margin-left: 2px;
}

.nav li:hover {
  background: gold;
}

.banner img {
  display: block;
  height: 400px;
  width: 100%;
}

.sub1 h3,
p {
  float: left;
  margin-left: 10px;
  width: 48%;
  display: inline-block;
  position: relative;
}

.sub2 {
  float: right;
  margin-right: 10px;
  width: 45%;
  display: flex;
  display: inline-block;
  position: relative;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/day1.css">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  <title>Bakem and Shakem</title>
</head>

<body>
  <div id="container">
    <div class="header">
      <img src="http://kojaks.betterplacesonline.com/wp-content/uploads/2016/09/Kojaks-Houose-of-Ribs-BBQ-Tampa-Logo-w-slogan-one-line-001-retina.png" alt="Logo">

      <div class="nav">
        <ul>
          <li>Home</li>
          <li>Recipes</li>
          <li>Contact</li>
          <li>Bakem</li>
        </ul>

      </div>
      <!-- navigation bar divider -->


    </div>
    <!-- header divider -->

    <div class="banner">
      <img src="http://www.brucelauderdale.com/wp-content/uploads/2011/08/ribs.png" alt="banner">
    </div>
    <div class="sub1">
      <h3>We make em, you bake em!</h3>
      <p>Boudin ham hock fatback, tongue beef ribs drumstick capicola picanha pork chop meatloaf. Strip steak meatball hamburger tri-tip flank. Biltong sirloin spare ribs tongue, shank cupim corned beef burgdoggen venison. Kevin shankle sirloin porchetta
        frankfurter.
      </p>

    </div>
    <!-- sub1 divider -->

    <div class="sub2">
      <form class="signup" action="index.html" method="post">
        <h3>Sign up for our news letter</h3>
        <p>Be apart of the bakem family</p>
        <input type="text" name="name" value="name"><label for="email" required>Name</label>
        <input type="email" name="email" value="email" required><label for="email">Email address</label>
      </form>
    </div>
    <!-- sub2 divider -->


  </div>
  <!-- conatiner divider -->


</body>

</html>

答案 3 :(得分：0)

评论此课程：

.sub1 h3, p {
/* float: left; */
/* margin-left: 10px; */
/* width: 48%; */
/* display: inline-block; */
/* position: relative; */
}

添加此课程：

.sub1 {
width: 50%;
float:left;
}

这必须有效！

相关问题
最新问题