亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

為什么我的側邊欄被推到主頁內容下方？（再次）

為什么我的側邊欄被推到主頁內容下方？（再次）

寶慕林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貢獻1794條經驗 獲得超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貢獻1848條經驗 獲得超2個贊

.row:after {

clear: both;

content: "";

display: table;

}


“清楚：兩者”是問題所在。要么刪除它，要么將其設置為“清除：右”


查看完整回答
反對 回復 2022-09-23
  • 2 回答
  • 0 關注
  • 112 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號