个人中心
gpt4 book ai didi

html - CSS float，除了正确的位置外到处 float

转载 作者：可可西里 更新时间：2023-11-01 15:02:36 25 4
gpt4 key购买 nike

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

我正在为自己建立一个基本网站，作为业余爱好元素的一部分。我试图将页面内容一分为二；左和右。但是，左侧总是位于右侧内容之上。就好像它忽略了 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 类中找到。我开始认为它一定是另一个类(class)，我在其中制定了与这个规则冲突的规则，我不确定。

最佳答案

您将样式应用于左列中的元素，而不是列本身。我刚刚从那个 .sub1 样式规则中删除了 oyut h3 和 p，我认为它是你想要的。由于您正在呈现的页面的大小 - 最好在全屏模式下查看运行片段 - 但您应该看到底部的两列内容。

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

关于html - CSS float，除了正确的位置外到处 float ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43732737/

25 4 0
文章推荐： javascript - 数组没有值时的 If 语句 (Javascript + HTML)
文章推荐： javascript - 使用 javascript 和媒体查询在调整大小时隐藏/显示粘性菜单 div
文章推荐： javascript - z-index 在 firefox 中不能正常工作
文章推荐： java - 线程 “main” java.lang.ClassNotFoundException :MaxTemperature 中的异常
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com