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

Question

我对现代 HTML 很陌生（或者太老了），我不得不开发简单的 UI。我需要在其中支持两种类型的屏幕：

如上所示，我的 UI 应该包含菜单和内容（例如，旁边或上方带有图片的文本）。如果用简单的话在手机上显示，它应该是 "rotated" 逆时针 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/

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

How to create fluid layout in modern HTML

html

layout

fluid-layout

具有 flexbox 的基本结构可以是