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

【问题标题】：How to create fluid layout in modern HTML如何在现代 HTML 中创建流畅的布局
【发布时间】：2019-03-25 07:50:42
【问题描述】：

对于现代 HTML，我还是个新手（或者对现代 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 中手动执行此操作的最简单变体是什么？

【问题讨论】：

你想避免 CSS 吗？
@ManojKumar 否。如果可以使用 CSS，它就很好。但是怎么做？我认为 CSS 是设置页面字体和颜色的方法。不是吗？你怎么能用它来旋转整个布局？
CSS 是最好的选择。您可以查看以下内容：sitepoint.com/order-align-items-grid-layout 以及使用媒体查询：css-tricks.com/snippets/css/media-queries-for-standard-devices
如果您可以分享一些您正在使用的代表性 (minimal reproducible example) 代码以及相关要求，我们可以提供一些可能有用的方法，但我们不会链接到，或编写广泛的教程。
@DavidThomas 我用一张我想做的图片分享了这样的例子。菜单、文本和图像，以及在移动熨平板上应该发生的事情。至于代码我还没有。但有人好心地将我指向menu in CSS

标签： html layout fluid-layout

【解决方案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/

【讨论】：