如何获取列中的列？

Question

我想让我的 CSS 看起来像这样：

但到目前为止我只能让它看起来像这样（仍然添加字体信息和图像）：

如何让它看起来像图 1 中的那样？我正在尝试使用多列，但它不起作用。

article {
  font-family: "alternate-gothic-no-1-d", sans-serif;
  width: 821px;
  height: 791px;
  margin-left: 94px;
  margin-top: 127px;
}
#menu {
  width: 665px;
  height: 772;
  column-count: 3;
}
#menumini {
  width: 365px;
}
#foodplace {
  width: 365px;
  column-count: 2;
}

<!-- This is the menu of my website-->
<article>
  <div id="menu">
    <div class="menumini" alt>
      <h2> BURGERS</h2>
      <div class="foodplace">
        <div class="Hamburger">
          <img src="img/hanburger.png" alt="hamburger">
          <p>Hamburger....29</p>
        </div>
        <div class="Chesse Burger">
          <img src="img/hanburger.png" alt="Chesse Burger">
          <p>Hamburger....29</p>
        </div>
        <div class="Bacon Burger">
          <img src="img/hanburger.png" alt="Bacon Burger">
          <p>Hamburger....29</p>
        </div>
        <div class="Bacon cheese Burger">
          <img src="img/hanburger.png" alt="Bacon cheese Burger">
          <p>Hamburger....29</p>
        </div>
      </div>
      <!-- food place ends here-->
    </div>
    <!--menu mini ends-->
    <div class="menumini">
      <h2>little BURGERS </h2>
      <div class="foodplace">
        <div class="Hamburger">
          <img src="img/hanburger.png" alt="hamburger">
          <p>Hamburger....29</p>
        </div>
        <div class="Chesse Burger">
          <img src="img/hanburger.png" alt="Chesse Burger">
          <p>Hamburger....29</p>
        </div>
        <div class="Bacon Burger">
          <img src="img/hanburger.png" alt="Bacon Burger">
          <p>Hamburger....29</p>
        </div>
        <div class="Bacon cheese Burger">
          <img src="img/hanburger.png" alt="Bacon cheese Burger">
          <p>Hamburger....29</p>
        </div>
      </div>
      <!-- food place ends here-->
    </div>
    <!--menu mini ends-->
    <div class="menumini">
      <h2>HOT DOGS </h2>
      <div class="foodplace">
        <div class="Hamburger">
          <img src="img/hanburger.png" alt="hamburger">
          <p>Hamburger....29</p>
        </div>
        <div class="Chesse Burger">
          <img src="img/hanburger.png" alt="Chesse Burger">
          <p>Hamburger....29</p>
        </div>
        <div class="Bacon Burger">
          <img src="img/hanburger.png" alt="Bacon Burger">
          <p>Hamburger....29</p>
        </div>
        <div class="Bacon cheese Burger">
          <img src="img/hanburger.png" alt="Bacon cheese Burger">
          <p>Hamburger....29</p>
        </div>
      </div>
      <!-- food place ends here-->
    </div>
    <!--menu mini ends-->

Answer 1

首先我会像这样调整你的 HTML:

<div class="menumini" alt>
  <h2> BURGERS</h2>
  <div class= "foodplace">
     <div class= "burger hamburger">
        <img src="img/hanburger.png"alt="hamburger" >
        <p> Hamburger....29</p>
      </div>
      <div class= "burger ChesseBurger">
        <img src="img/hanburger.png" alt="Chesse Burger">
        <p> Hamburger....29</p> 
      </div>
      <div class= "burger BaconBurger">
        <img src="img/hanburger.png" alt="Bacon Burger">
        <p> Hamburger....29</p> 
      </div>
      <div class= "burger BaconCheeseBurger">
        <img src="img/hanburger.png" alt="Bacon cheese Burger">
        <p> Hamburger....29</p> 
      </div> 
  </div><!-- food place ends here-->
</div> <!--menu mini ends-->

然后你会像这样调整CSS：

.menumini {
  display:inline-block;
  vertical-align:top;
  width:40%;
}
.foodplace {
  display:block;
  width:100%;
  text-align:center;
}
.burger {
  display:inline-block;
  vertical-align:top;
  width:45%;
  text-align:center;
}

这将允许您用一个 class 设计所有汉堡的样式，但也允许您使用以下方法对特定汉堡进行单独调整：

.burger.CheeseBurger

如何获取列中的列？

How do I get a column within a column?

html

css

layout

css-multicolumn-layout