列内の列を取得するにはどうすればよいですか？

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...$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-->

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

これはあなたをできるようになります1つのクラスですべてのハンバーガーをスタイルするだけでなく、あなたがindを作ることを可能にする

.burger.CheeseBurger