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

Question

我需要在网站上放置带有静态文本的专栏，因为当我缩小窗口时，它会向左移动。我不知道我在哪里可以解决这个问题，我试图改变立场：但它不起作用。谢谢大家:)

https://codepen.io/ta_io/pen/xebQyE

<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>

标签： htmlcss

Answer 1

我不完全理解你的问题，但据我所知，你不希望表格列相互折叠，你可以使用 CSS Grid 来解决这个问题，看看.table规则（我删除了你的一些 css sry 没有'不想阅读所有这些）。你可以玩弄这些价值观，如果你有更多问题或者这不是你想要的，你可以在评论中问我。

  * {
    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>