html - 如何并排对齐餐厅菜单的标题？

Question

我正在为本地一家餐馆建立网站，这是我的第一个网站。我现在正在写菜单，但我不知道如何在屏幕的一半和另一半并排放置主菜单。我也没有成功地让它响应，因为当我把屏幕变小时它变得非常困惑。

我曾尝试使用 col-sm-6 修改 bootstrap 4，但这对我不起作用。我也尝试在 CSS 中使用 flow 和 float，但没有成功。

<div class="menu-title">
      <h1>STARTERS</h1>
      <div class="menu-items">
        <div class="menu-item-body">
          <span class="number">1.</span>
          <span class="name">Vegetable Spring Roll</span>
          <span class="price">4.50&nbsp;€</span>
          <div class="description">
          Crispy spring roll with shredded cabbage, carrot, sweetcorn and soy sauce.                 
          </div>
        </div>                 
      </div>

      <div class="menu-items">
        <div class="menu-item-body">
          <span class="number">2.</span>
          <span class="name">Chicken Cheese Roll</span>
          <span class="price">4.50&nbsp;€</span>
          <div class="description">
          Crispy chicken cheese roll with chicken, onion, spring onion and cheese with sweet chilli sauce.                 
          </div>
        </div>                 
      </div>

CSS

.menu-title{
  flex-direction: column;
}


.menu-items {
  width: 100%; 
  padding: 50px 30px;
  flex-flow: row ;
}

.menu-item-body {
  float: left; 
  position: absolute;
  overflow-x: hidden;
  padding-left: 25px;
  margin: 0 1%; 
  width: 31%; 
}
.number {
  position: absolute;
  left: 0;
}
.name {
  background-color: #fff; 
}

.name:after {
  float: left;
  width: 0;
  white-space: nowrap;
  content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . ";
}
.price {
  padding-left: 5px;
  float: right !important;
  background-color: #fff;
}
.description {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 10px;
}

我希望输出能够响应并在更大的屏幕上显示 2 或 3 列菜单标题。

Answer 1

您可以使用媒体查询和一些简单的 float 和伪选择器非常简单地完成此操作。默认情况下，它允许您以正常流堆叠内容(非常适合较小的视口(viewport))，但对于较大的视口(viewport)，使用 float 和宽度值并排设置容器。

这是一个简单的基于 float 的布局示例，它允许多个平行部分在多个视口(viewport)上响应良好。这是 a CodePen demo of parallel sections with floats ，然后是工作代码和解释:

body {
  background: gray;
}

.parent {
  background: white;
  overflow: hidden;
  padding: 0 1em;
}

@media (min-width: 40em) {
  .parallel:not(:only-child)  {
    box-sizing: border-box;
    clear: both;
    float: left;
    width: 45%;
  }
  
  .parallel:nth-of-type(even) {
    float: right;
    clear: right;
  }
}

<div class="parent">
  <div class="parallel">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
  </div>
  <div class="parallel">
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
  </div>
  <div class="parallel">
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
  </div>
  <div class="parallel">
    <h2>Section 4</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
  </div>
</div>

<div class="parent">
<div class="parallel">
    <h2>Section 5 &#8212 Oops! No siblings!</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quaerat, quis hic quas earum officia numquam illum odio ipsa dolore accusamus, est expedita placeat autem sunt porro libero non ut.</p>
</div>
</div>

即使有不同长度的部分， float 也可以在不诉诸高级技术或大量标记的情况下处理布局，方法是让内容在较小的视口(viewport)中保持简单，然后通过媒体查询进行调整以在较大的视口(viewport)上并行运行。

使它干净地运行的一些技术技巧:

• :not(:only-child) 允许您仅在平行项在其行中有兄弟项时应用较大的视口(viewport)拆分。这只是一个有用的捕获，以防一个部分需要自己排成一行或者临时删除一个兄弟。您无需修改​​标记，而是让 CSS 处理是否拆分屏幕。
• 向左浮动的元素应该清除两者，向右浮动的元素应该只向右清除。这允许您将多个元素放在同一个父容器和效果行中，而无需添加标记。
• 要允许各部分错开而不是按行对齐，您可以从媒体查询的第一个选择器中删除 clear: both;。否则将是相同的。

还有其他更现代的解决方案，但这个很好、简单且灵活，标记最少。