为什么我的侧边栏被推到主页内容下方？（再次）-解网

问：

两天前，我问为什么一些被分成几列的内容被推到另一列下面，@Josie得到了一个非常有帮助的回答。这一直奏效，直到我做了一张桌子，由于某种原因，它打破了显示顺序。

一些背景：通过使用 CSS 创建不相等的列，我试图将页面划分为一个包含主要内容（）的大列和用作侧边栏的较细列（）。但是，侧边栏被推到主要内容下方，除非我使任一列的宽度比实际宽度小 2%。.leftcolumn.rightcolumn

我尝试按照此答案的建议切换标签的顺序，但这没有效果。我还试图为主要内容赋予一个属性[正如这里的答案所建议的那样][2]，但这只能将主要内容中的两个示例帖子组合在一起，而对侧边栏没有影响。我测试的另一件事是分配给主要内容和侧边栏，这是[这个答案给出的解决方案][3]，但这对实际显示没有影响。我还尝试了下面 @rajneesh-tiwari 的建议在侧边栏的父容器下定义，但这对显示也没有影响。display: flexposition: relativeposition: absolutez-index: 999

下面是代码。出于某种原因，侧边栏闯入了表格的底部......

<head>
  <style>
    * {
      color: black;
      font-family: Arial, sans-serif;
    }

    body {
      background: gray;
      padding: 5px;
    }

    .header {
      background-color: white;
      border-radius: 4px;
      padding: 25px;
      text-align: center;
    }

    .header h1 {
      font-size: 50px;
    }

    .header p {
      font-size: 15px;
      font-style: italic;
    }

    .topnav {
      background-color: #444;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      overflow: hidden;
    }

    .topnav a {
      color: white;
      float: left;
      max-width: 25%;
      padding: 12px 16px;
      text-align: center;
      text-decoration: none;
      width: 100%;
    }

    .topnav a:hover {
      background-color: #eee;
      color: black;
    }

    .topnav a:active {
      background-color: #444;
      color: white;
    }

    .leftcolumn {
      float: left;
      width: 75%;
    }

    .rightcolumn {
      background-color: white;
      float: left;
      padding-left: 20px;
      width: calc(25% - 20px);
    }

    .card {
      background-color: white;
      border-radius: 4px;
      margin-top: 20px;
      padding: 20px;
    }

    .row:after {
      clear: both;
      content: "";
      display: table;
    }

    table {
      border: 1px solid black;
      border-collapse: collapse;
      font-family: Arial, sans-serif;
      margin: 5px;
      width: 100%;
    }

    th, td {
      border: 1px solid black;
      border-collapse: collapse;
      font-family: Arial, sans-serif;
      margin: 5px;
      padding: 5px;
    }

    @media screen and (max-width: 800px) {
      .leftcolumn, .rightcolumn {
        padding: 0;
        width: 100%;
      }
    }

    @media screen and (max-width: 400px) {
      .topnav a {
        float: none;
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="header">
    <h1>Weight Calculator</h1>
  </div>

  <div class="topnav">
    <a href="index.html">Home</a>
    <a href="calculator.html">Calculator</a>
    <a href="solutions.html">Solutions</a>
  </div>

  <div class="row">
    <div class="leftcolumn">
      <div class="card">
        <table>
          <caption>Weight Calculator</caption>
          <tr>
            <th>Person</th>
            <th>Weight</th>
          </tr>
          <tr>
            <td>Jack</td>
            <td id="jack" oninput="myFunction()">1</td>
          </tr>
          <tr>
            <td>John</td>
            <td id="john" oninput="myFunction()">2</td>
          </tr>
            <tr>
            <td>Joe</td>
            <td id="joe" oninput="myFunction()">3</td>
          </tr>
          <tr>
            <td>Total</td>
            <td id="total"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>

        <script type="text/javascript">
          document.getElementById("jack").contentEditable = true;
          document.getElementById("john").contentEditable = true;
          document.getElementById("joe").contentEditable = true;

          function myFunction()  {
            var jack2 = document.getElementById("jack").innerText;
            var john2 = document.getElementById("john").innerText;
            var joe2 = document.getElementById("joe").innerText;

            var total2 = parseInt(jack2) + parseInt(john2) + parseInt (joe2);

            document.getElementById("total").innerHTML = total2;
          }

            myFunction();
        </script>

    <div class="rightcolumn">
      <div class="card">
        <h3>Test</h3>
        <p>Text</p>
      </div>
      <div class="card">
        <h3>Test</h3>
        <p>Text</p>
      </div>
      <div class="card">
        <h3>Test</h3>
        <p>Text</p>
      </div>
    </div>
</body>

有人知道我做错了什么吗？任何帮助都是值得赞赏的！

JavaScript HTML CSS

1赞 theFrontEndDev 6/8/2020

为什么“rightcolumn”div 在行外？它不应该是类为“row”的 div 的子项吗？

1赞 ttoshiro 6/8/2020

哈哈哈，我真傻。这修好了！如果你想回答这个问题，我可以把它标记为已回答，并给你分数。感谢您的帮助！

答：

0赞 Nosheep 6/8/2020 #1

.row:after {
clear: both;
content: "";
display: table;

}

“clear：both”是问题所在。要么删除它，要么将其设置为“clear：right”

1赞 theFrontEndDev 6/8/2020 #2

您应该为两个子 div （ leftcolumn 和 rightcolumn ）在一个共同的父（row）中。这应该可以解决这里的问题。

PS - 这与问题无关。执行上述操作应该可以解决您目前的问题。但是并排排列项目的理想方法是使用 flexbox。你可以给行。无需对两个子项都使用 float-left ，这将是实现此类布局的理想方式

.row {
   display: flex
}

一个更好的解决方案是使用 bootstrap，您可以使用 boostrap 网格系统轻松实现这种类型的布局 - https://getbootstrap.com/docs/4.1/layout/grid/

<head>
  <style>
    * {
      color: black;
      font-family: Arial, sans-serif;
    }

    body {
      background: gray;
      padding: 5px;
    }

    .header {
      background-color: white;
      border-radius: 4px;
      padding: 25px;
      text-align: center;
    }

    .header h1 {
      font-size: 50px;
    }

    .header p {
      font-size: 15px;
      font-style: italic;
    }

    .topnav {
      background-color: #444;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      overflow: hidden;
    }

    .topnav a {
      color: white;
      float: left;
      max-width: 25%;
      padding: 12px 16px;
      text-align: center;
      text-decoration: none;
      width: 100%;
    }

    .topnav a:hover {
      background-color: #eee;
      color: black;
    }

    .topnav a:active {
      background-color: #444;
      color: white;
    }

    .leftcolumn {
      float: left;
      width: 75%;
    }

    .rightcolumn {
      background-color: white;
      float: left;
      padding-left: 20px;
      width: calc(25% - 20px);
    }

    .card {
      background-color: white;
      border-radius: 4px;
      margin-top: 20px;
      padding: 20px;
    }

    .row:after {
      clear: both;
      content: "";
      display: table;
    }

    table {
      border: 1px solid black;
      border-collapse: collapse;
      font-family: Arial, sans-serif;
      margin: 5px;
      width: 100%;
    }

    th, td {
      border: 1px solid black;
      border-collapse: collapse;
      font-family: Arial, sans-serif;
      margin: 5px;
      padding: 5px;
    }

    @media screen and (max-width: 800px) {
      .leftcolumn, .rightcolumn {
        padding: 0;
        width: 100%;
      }
    }

    @media screen and (max-width: 400px) {
      .topnav a {
        float: none;
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="header">
    <h1>Weight Calculator</h1>
  </div>

  <div class="topnav">
    <a href="index.html">Home</a>
    <a href="calculator.html">Calculator</a>
    <a href="solutions.html">Solutions</a>
  </div>

  <div class="row">
    <div class="leftcolumn">
      <div class="card">
        <table>
          <caption>Weight Calculator</caption>
          <tr>
            <th>Person</th>
            <th>Weight</th>
          </tr>
          <tr>
            <td>Jack</td>
            <td id="jack" oninput="myFunction()">1</td>
          </tr>
          <tr>
            <td>John</td>
            <td id="john" oninput="myFunction()">2</td>
          </tr>
            <tr>
            <td>Joe</td>
            <td id="joe" oninput="myFunction()">3</td>
          </tr>
          <tr>
            <td>Total</td>
            <td id="total"></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="rightcolumn">
      <div class="card">
        <h3>Test</h3>
        <p>Text</p>
      </div>
      <div class="card">
        <h3>Test</h3>
        <p>Text</p>
      </div>
      <div class="card">
        <h3>Test</h3>
        <p>Text</p>
      </div>
    </div>
  </div>

        <script type="text/javascript">
          document.getElementById("jack").contentEditable = true;
          document.getElementById("john").contentEditable = true;
          document.getElementById("joe").contentEditable = true;

          function myFunction()  {
            var jack2 = document.getElementById("jack").innerText;
            var john2 = document.getElementById("john").innerText;
            var joe2 = document.getElementById("joe").innerText;

            var total2 = parseInt(jack2) + parseInt(john2) + parseInt (joe2);

            document.getElementById("total").innerHTML = total2;
          }

            myFunction();
        </script>

    
</body>

上一个：如何在Firebase中删除.html URL结尾并配置重定向？

下一个：如何使用jQuery / JavaScript使可扩展的表格单元格默认隐藏，并且可以在标签外部单击？

为什么我的侧边栏被推到主页内容下方？（再次）

Why is my sidebar getting pushed underneath the main page content? (Again)

评论