如何在列中获取列？

Question

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

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<!-- 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...$5.29</p>
        </div>
        <div class="Chesse Burger">
          <img src="img/hanburger.png" alt="Chesse Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon Burger">
          <img src="img/hanburger.png" alt="Bacon Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon cheese Burger">
          <img src="img/hanburger.png" alt="Bacon cheese Burger">
          <p>Hamburger...$5.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...$5.29</p>
        </div>
        <div class="Chesse Burger">
          <img src="img/hanburger.png" alt="Chesse Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon Burger">
          <img src="img/hanburger.png" alt="Bacon Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon cheese Burger">
          <img src="img/hanburger.png" alt="Bacon cheese Burger">
          <p>Hamburger...$5.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...$5.29</p>
        </div>
        <div class="Chesse Burger">
          <img src="img/hanburger.png" alt="Chesse Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon Burger">
          <img src="img/hanburger.png" alt="Bacon Burger">
          <p>Hamburger...$5.29</p>
        </div>
        <div class="Bacon cheese Burger">
          <img src="img/hanburger.png" alt="Bacon cheese Burger">
          <p>Hamburger...$5.29</p>
        </div>
      </div>
      <!-- food place ends here-->
    </div>
    <!--menu mini ends-->

＆＃13;

＆＃13;

＆＃13;

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...$5.29</p>
      </div>
      <div class= "burger ChesseBurger">
        <img src="img/hanburger.png" alt="Chesse Burger">
        <p> Hamburger...$5.29</p> 
      </div>
      <div class= "burger BaconBurger">
        <img src="img/hanburger.png" alt="Bacon Burger">
        <p> Hamburger...$5.29</p> 
      </div>
      <div class= "burger BaconCheeseBurger">
        <img src="img/hanburger.png" alt="Bacon cheese Burger">
        <p> Hamburger...$5.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;
}

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

.burger.CheeseBurger