Question

我需要将带有静态文本的列放在网站上，因为当我缩小窗口时，它向左移动。我不知道该怎么解决这个问题，我试图改变立场：但这是行不通的。让所有人感叹：）

<div class="container2">
  <div class="table">
    <div class="cell" style="width: 220px;">
      <div class="title">
        <h1>title</h1>
      </div>
      <div class="infos">
        <small>
                                <table>
                                    <tbody><tr>
                                        <td width="45px">
                                            Date
                                        </td>
                                        <td>
                                            November 17, 2019               </td>
                                        </tr>

                                        <tr>
                                            <td width="45px">
                                                Tags
                                            </td>
                                            <td>
                                                <a>ONE</a>
                                              <a>TWO  </a>
                                              <a>THREE</a>
                                            </td>
                                        </tr>




                                    </tbody></table>
                            </small>
      </div>
    </div>
    <div class="cell">
      <div id="text" class="columns">
        <div class="listenelement">
          Duis molestie tincidunt accumsan. Phasellus fringilla est vitae hendrerit volutpat. Curabitur molestie ante sollicitudin vehicula lobortis. Nam interdum elit tortor. Sed luctus vulputate sapien, sed auctor lectus dignissim a. Vivamus fringilla, enim a
          dignissim consequat, leo ligula ullamcorper sapien, et blandit est libero nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        </div>
      </div>
    </div>

  </div>
</div>

Answer 1

我不是完全理解您的问题，但是从我掌握的内容来看，您不希望表列彼此折叠，因此您可以使用CSS Grid，查看.table规则（删除了某些您不想阅读的所有CSS）。您可以使用这些值，如果您还有其他问题，或者不是您想要的，可以在评论中问我。

  * {
    margin: 0;
    padding: 0;
  }

  html {

    width: 100%;
    height: 100vh;
    margin: 0 auto;
    padding: 0 auto;

  }


  body {

    width: 100%;
    height: 100vh;
    margin: 0 auto;
    padding: 0 auto;
  }



  .container2 {
    max-width: 100%;
    width: 85%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .table {
    display: grid;
    grid-template-columns: 250px 250px;
  }

<div class="container2">
  <div class="table">
    <div class="cell" style="width: 220px;">
      <div class="title">
        <h1>title</h1>
      </div>
      <div class="infos">
        <small>
          <table>
            <tbody>
              <tr>
                <td width="45px">
                  Date
                </td>
                <td>
                  November 17, 2019				
                </td>
              </tr>
              <tr>
                <td width="45px">
                  Tags
                </td>
                <td>
                  <a>ONE</a>
                  <a>TWO  </a>
                  <a>THREE</a>
                </td>
              </tr>
            </tbody></table>
        </small>
      </div>
    </div>
    <div class="cell">
      <div id="text" class="columns">
        <div class="listenelement">
          Duis molestie tincidunt accumsan. Phasellus fringilla est vitae hendrerit volutpat. Curabitur molestie ante sollicitudin vehicula lobortis. Nam interdum elit tortor. Sed luctus vulputate sapien, sed auctor lectus dignissim a. Vivamus fringilla, enim a
          dignissim consequat, leo ligula ullamcorper sapien, et blandit est libero nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        </div>
      </div>
    </div>

  </div>
</div>

缩小窗口时如何使列保持静态？

1 个答案: