为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我的侧边栏被推到主页内容下方?(再次)

为什么我的侧边栏被推到主页内容下方?(再次)

宝慕林4294392 2022-09-23 14:42:20

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

    }



查看完整描述

2 回答

?
幕布斯7119047

TA贡献1468条经验 获得超8个赞

您应该为 2 个子 div 提供公共父项(行)中的左列和右列)。这应该可以解决这里的问题。


PS - 这与问题无关。执行上述操作应该可以解决您当前的问题。但是,并排排列项目的理想方法是使用弹性框。你可以给行。无需使用浮子 - 留给两个孩子,这将是实现这种布局的理想方式


.row {

   display: flex

}

一个更好的解决方案是使用引导,你可以使用booprap网格系统轻松实现这种类型的布局 - 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>


查看完整回答
反对 回复 2022-09-23
?
慕尼黑5688855

TA贡献1534条经验 获得超1个赞

.row:after {

clear: both;

content: "";

display: table;

}


“清楚:两者”是问题所在。要么删除它,要么将其设置为“清除:右”


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信