猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

两天前，我问为什么一些被分成几列的内容被推到另一列下面，并得到了@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%;

    }



宝慕林4294392
浏览 63回答 2
2回答

幕布斯7119047

您应该为 2 个子 div 提供公共父项（行）中的左列和右列）。这应该可以解决这里的问题。PS - 这与问题无关。执行上述操作应该可以解决您当前的问题。但是，并排排列项目的理想方法是使用弹性框。你可以给行。无需使用浮子 - 留给两个孩子，这将是实现这种布局的理想方式.row {&nbsp; &nbsp;display: flex}一个更好的解决方案是使用引导，你可以使用booprap网格系统轻松实现这种类型的布局 - https://getbootstrap.com/docs/4.1/layout/grid/<head>&nbsp; <style>&nbsp; &nbsp; * {&nbsp; &nbsp; &nbsp; color: black;&nbsp; &nbsp; &nbsp; font-family: Arial, sans-serif;&nbsp; &nbsp; }&nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; background: gray;&nbsp; &nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; }&nbsp; &nbsp; .header {&nbsp; &nbsp; &nbsp; background-color: white;&nbsp; &nbsp; &nbsp; border-radius: 4px;&nbsp; &nbsp; &nbsp; padding: 25px;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; }&nbsp; &nbsp; .header h1 {&nbsp; &nbsp; &nbsp; font-size: 50px;&nbsp; &nbsp; }&nbsp; &nbsp; .header p {&nbsp; &nbsp; &nbsp; font-size: 15px;&nbsp; &nbsp; &nbsp; font-style: italic;&nbsp; &nbsp; }&nbsp; &nbsp; .topnav {&nbsp; &nbsp; &nbsp; background-color: #444;&nbsp; &nbsp; &nbsp; border-radius: 4px;&nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; }&nbsp; &nbsp; .topnav a {&nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; max-width: 25%;&nbsp; &nbsp; &nbsp; padding: 12px 16px;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; }&nbsp; &nbsp; .topnav a:hover {&nbsp; &nbsp; &nbsp; background-color: #eee;&nbsp; &nbsp; &nbsp; color: black;&nbsp; &nbsp; }&nbsp; &nbsp; .topnav a:active {&nbsp; &nbsp; &nbsp; background-color: #444;&nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; }&nbsp; &nbsp; .leftcolumn {&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; width: 75%;&nbsp; &nbsp; }&nbsp; &nbsp; .rightcolumn {&nbsp; &nbsp; &nbsp; background-color: white;&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; padding-left: 20px;&nbsp; &nbsp; &nbsp; width: calc(25% - 20px);&nbsp; &nbsp; }&nbsp; &nbsp; .card {&nbsp; &nbsp; &nbsp; background-color: white;&nbsp; &nbsp; &nbsp; border-radius: 4px;&nbsp; &nbsp; &nbsp; margin-top: 20px;&nbsp; &nbsp; &nbsp; padding: 20px;&nbsp; &nbsp; }&nbsp; &nbsp; .row:after {&nbsp; &nbsp; &nbsp; clear: both;&nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; display: table;&nbsp; &nbsp; }&nbsp; &nbsp; table {&nbsp; &nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; &nbsp; border-collapse: collapse;&nbsp; &nbsp; &nbsp; font-family: Arial, sans-serif;&nbsp; &nbsp; &nbsp; margin: 5px;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; }&nbsp; &nbsp; th, td {&nbsp; &nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; &nbsp; border-collapse: collapse;&nbsp; &nbsp; &nbsp; font-family: Arial, sans-serif;&nbsp; &nbsp; &nbsp; margin: 5px;&nbsp; &nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; }&nbsp; &nbsp; @media screen and (max-width: 800px) {&nbsp; &nbsp; &nbsp; .leftcolumn, .rightcolumn {&nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; @media screen and (max-width: 400px) {&nbsp; &nbsp; &nbsp; .topnav a {&nbsp; &nbsp; &nbsp; &nbsp; float: none;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; </style></head><body>&nbsp; <div class="header">&nbsp; &nbsp; <h1>Weight Calculator</h1>&nbsp; </div>&nbsp; <div class="topnav">&nbsp; &nbsp; <a href="index.html">Home</a>&nbsp; &nbsp; <a href="calculator.html">Calculator</a>&nbsp; &nbsp; <a href="solutions.html">Solutions</a>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <div class="leftcolumn">&nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <caption>Weight Calculator</caption>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Person</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Weight</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Jack</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id="jack" oninput="myFunction()">1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>John</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id="john" oninput="myFunction()">2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Joe</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id="joe" oninput="myFunction()">3</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Total</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id="total"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="rightcolumn">&nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; <h3>Test</h3>&nbsp; &nbsp; &nbsp; &nbsp; <p>Text</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; <h3>Test</h3>&nbsp; &nbsp; &nbsp; &nbsp; <p>Text</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; <h3>Test</h3>&nbsp; &nbsp; &nbsp; &nbsp; <p>Text</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("jack").contentEditable = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("john").contentEditable = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("joe").contentEditable = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function myFunction()&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var jack2 = document.getElementById("jack").innerText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var john2 = document.getElementById("john").innerText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var joe2 = document.getElementById("joe").innerText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var total2 = parseInt(jack2) + parseInt(john2) + parseInt (joe2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("total").innerHTML = total2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myFunction();&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp;&nbsp;</body>
0

慕尼黑5688855

.row:after {clear: both;content: "";display: table;}“清楚：两者”是问题所在。要么删除它，要么将其设置为“清除：右”
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript