javascript - 编写可缩放多列布局的首选方式是什么？

Question

我有一个包含 3 列的网页，并且只在全尺寸屏幕上看起来不错。我即将编写一些主要更新以使我的网站适合移动设备。我网站的其余部分我对更新没有任何疑虑，升级将是直接的，但我不知道我将如何处理我的 3 列表布局。为了使其移动，我将不得不采用三列并将内容移动到一个单独的列中。

要做到这一点是否可以纯粹通过 html & css 来实现？还是涉及javascript的东西？在 javascript 中完成它会很好，但如果有一种方法可以在 CSS 中完成，我宁愿从那里开始。

  <table id="resource_manager">
        <tr> <!--Row #1-->
          <td colspan="3">
            <h1 class="center_text">Notable Ministries</h1>
            <br>
          </td>
        </tr>
        <tr> <!--Row #2-->
          <td colspan="2" class="center_text">
            <p style="text-align: left">
              My purpose for putting this together is mainly because friends ask me where they can get more information on something, it's always nice to be able
              to point someone in the right direction to get answers.
              <br><br>
              All resources here should be publicly accessible, mostly via youtube or directly from the persons web page. Please notify me if any links are broken.
              <br><br>
              <h2 style="text-align: left">Ephesians 4:11-16</h2>
                <p style="text-align: left">
                And He Himself gave some to be apostles, some prophets, some evangelists, and some pastors and teachers, for the equipping of the saints for
                the work of ministry, for the edifying of the body of Christ, till we all come to the unity of the faith and of the knowledge of the Son of God, to
                a perfect man, to the measure of the stature of the fullness of Christ; that we should no longer be children, tossed to and fro and carried about
                with every wind of doctrine, by the trickery of men, in the cunning craftiness of deceitful plotting, but, speaking the truth in love, may grow up
                in all things into Him who is the head—Christ— from whom the whole body, joined and knit together by what every joint supplies, according to the
                effective working by which every part does its share, causes growth of the body for the edifying of itself in love.
                </p>
            </p>
            <br>
          </td>
        </tr>
        <tr class="resource_row_image"> <!--Row #3-->
          <td class="cell_size"> <!--Cell 1 Keith Moore-->
            <a href="http://www.moorelife.org/freedownloads-serieslist.php?" target="_blank">
              <img src="img/resources/keith_moore.jpg" alt="keith moore" class="resource_image">
            </a>
          </td>
          <td class="cell_size"> <!--Cell 2 Kenneth Hagin-->
            <a href="https://www.youtube.com/playlist?list=PLIXcY2izjpDgROo3MRlAU2MJSyjthXLLc" target="_blank">
              <img src="img/resources/kenneth_hagin.jpg" alt="kenneth hagin" class="resource_image">
            </a>
          </td>
          <td class="cell_size"> <!--Cell 3 Bill Johnson-->
            <a href="https://www.youtube.com/playlist?list=PLEtP4XPKdli585uNfIU8WNRYawCusmEYK" target="_blank">
              <img src="img/resources/bill_johnson.jpg" alt="bill johnson" class="resource_image">
            </a>
          </td>
        </tr>
          <tr class="resource_row_text"> <!--Row #4-->
            <td class="cell_size"> <!--Cell 1 Keith Moore-->
              <h2>Keith Moore</h2>
              Teacher/Pastor, I reffer to Keith as my "bible college experience," he has 30+ years
              of free audio and video available on any and every subject.
            </td>
            <td class="cell_size"> <!--Cell 2 Kenneth Hagin-->
              <h2>Kenneth Hagin</h2>
              Prophet, with nearly 70 years of ministry under his belt, Hagin most commonly preached on the subject of faith in Gods word.
            </td>
            <td class="cell_size"> <!--Cell 3 Bill Johnson-->
              <h2>Bill Johnson</h2>
                Apostle/Pastor, Bill pastors a church in Redding California named Bethel Church, the church is most known for miracles, signs and wonders.
            </td>
          </tr>

Answer 1

我建议使用 Flexbox . Here是一个简单的 3 列布局。

HTML:

<div class="flex-container">
  <div class="flex-item">COL 1</div>
  <div class="flex-item">COL 2</div>
  <div class="flex-item">COL 3</div>
</div>

CSS:

*{
  margin: 0;
  padding: 0;
}

.flex-container{
  display: flex;
  flex: row nowrap;
  height: 100vh;
}

.flex-item{
  border: 1px solid black;
  background-color: blue;
  width: 100%;
}

如您所见，创建此布局只需要很少的 HTML 和 CSS。如果您想在手机上查看时更改 3 列布局，您可以使用 Media Queries .