html - 两个连续的 inline-block 容器如何在网页上对齐？何时需要垂直对齐将它们彼此对齐？

Question

下面是我的代码。对于内联块容器，即带有图像的容器和带有文本的另一个容器。我需要 vertical-align: top 将它们彼此相邻对齐。但是对于包含厨师图像的容器，不需要使用 vertical-align 属性。这两个容器会自动并排对齐。为什么这样？？？代码：

   #figu {
            margin-left: 12vh;
            margin-top: 10vh;
            width: 80vh;
            display: inline-block;
        }
        .beg {
            height: 60vh;
        }
        #intro {
            display: inline-block;
            width: 80vh;
            font-size: 1.5em;
            margin-left: 3vh;
            background-color: aliceblue ;
            vertical-align:top;
            margin-top: 10vh ;
            height: 60vh ;
            padding: 3.2vh ;
            box-sizing: border-box ;
        }
        #tod
        {
            width: 80vh ;
            height: 60vh ;
            background-color: aliceblue ;
            padding: 3.2vh ;
            font-size: 1.5em;
            margin-top: 20vh ;
            margin-left: 8vh ;
            display: inline-block ;
            box-sizing: border-box ;
        }
        .head
        {
            margin-bottom: 3vh;
        }
        #fig
        {
            display: inline-block ;
            margin-left: 4vh ;
            margin-top: 20vh ;
            box-sizing: border-box ;
            vertical-align: top ; 
        }
        .today
        {
            width: 80vh  ;
        }
        .chef
        {
            display: inline-block ;
            margin-top: 20vh ;  
            margin-left: 10vh ;   
            background-color:black ;
            width: 80vh ;   
        }
        .name
        {
            color:aliceblue;
            display: inline-block ;
            vertical-align: top ;
            font-size: 2em ;
            margin-top: 10vh ;
            font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }
        .designation
        {
            color:aliceblue;
            font-size: 2em ;
            font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            display: inline-block ;
            margin-left: 54vh  ;
            position: relative ;
            bottom: 45vh ;
        }
        .chef2
        {
            border:2px solid red ;
            display: inline-block ;
            width: 80vh ;
            background-color: aliceblue;
            
        }
        .cf{
            color: black ;
        }

<section id="intro">
        <h1 class="head">The Beginning</h1>
        <p>In 1966, three local businessmen in their hometown of Warren, NJ, decided to open a steakhouse restaurant
            that served the highest quality cuts of meat to its patrons. That decision led to opening the first of many
            Charlie Brown’s restaurants and building what has become a New Jersey steakhouse icon. With a location in
            the Township of Washington that has been a Bergen County staple for 48 years, we continue to follow our
            founders’ tradition; their impeccable execution of serving fresh cuts of meats alongside garden-fresh
            produce from the highest quality farms in the Garden State.</p>
    </section>
    <section id ="tod">
        <h1 class ="head">Today</h1>
        <p>Serving New Jersey with over 50 years of experience, Charlie Brown’s Fresh Grill and Steakhouse offers our signature and aged hand-carved, slow-roasted prime rib, delicious USDA Choice steaks, juicy USDA Choice burgers, our famous Unlimited Farmer’s Market Salad Bar™, and so much more. Our philosophy is simple: to provide great food, exceptional value, and friendly service to each and every customer we serve. No matter where you call home, you can expect the same family-friendly restaurant atmosphere, great service and value, and delicious food you look forward to any day of the week.
        </p>
    </section>
    <figure id ="fig">
       <img class="beg today"src="Todayimage.jpg" alt=""> 
    </figure>
    <figure class ="chef">
        <img class="beg"src="chef1.png" alt="">
        <div class="name">Filip Grazeta</div>
        <div class="designation" >CHEF</div>
    </figure>
    <figure class="chef2">
        <img class="beg"src="chef2.png" alt="">
        <div class="cf name">Pawet Kaszubski</div>
        <div class="cf designation">DEPUTY CHEF</div>
    </figure>

标签： htmlcss