html - 如何在现代 HTML 中创建流畅的布局

Question

我对现代 HTML 还很陌生(或者太老了)，我必须开发简单的 UI。我需要在其中支持两种类型的屏幕:

如上所示，我的 UI 应该由菜单和内容(例如，旁边或上方带有图片的文本)组成。如果用简单的话显示在手机上，它应该逆时针“旋转”90 度。

在我的时代，布局是通过 <table><tr><td>.. 完成的或 <frameset>.. -喜欢的东西。但一个方案是 <td>item1</td><td>item2</td>另一个是<tr>item1</tr><tr>item2</tr> .在静态 .htm 文本文件中，我只能编写一个变体。我知道的一种方法是大量使用 javascript 并通过 document.write() 生成文档。 ，但我不太喜欢这个想法，我相信应该存在更简单的东西..

在不使用繁重且难以学习的框架的情况下，在 HTML 中手动执行此操作的最简单变体是什么？

Answer 1

flexbox 的基本结构可以是

(没有任何样式和尺寸)

figure {
  margin: 0;
}

.list-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

.d-flex {
  display: flex;
}

@media screen and (max-width: 767.99px) {
  .sm-fd-column {
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .lg-fd-column {
    flex-direction: column;
  }
  /* ... */
  .lg-order-2 {
    order: 2;
  }
  /* ... */
}

<div class="d-flex lg-fd-column">
  <div>
    <ul class="list-unstyled d-flex sm-fd-column">
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
    </ul>
  </div>
  <div class="d-flex sm-fd-column">
    <figure class="lg-order-2"><img src="http://via.placeholder.com/200x150" alt=""></figure>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus saepe nobis impedit excepturi, perspiciatis! Eaque in quam corporis, modi, eos assumenda error totam autem cumque dolores magni deleniti! Doloribus, unde.
    </p>
  </div>
</div>

它提供两种不同的尺寸:小号(sm)和大号(lg)。

关于 flexbox 的更多信息: https://css-tricks.com/snippets/css/a-guide-to-flexbox/