Div对齐，使它们保持在同一行

Question

如何让微笑保持在同一行？我知道这是愚蠢的 我如何让微笑留在同一排？我知道这是愚蠢的 我如何让微笑留在同一排？我知道这是愚蠢的 我如何让微笑留在同一排？我知道这是愚蠢的 我如何让微笑留在同一排？我知道这是愚蠢的 我如何让微笑留在同一排？我知道这是愚蠢的

＆＃13;

＆＃13;

.container {
            position: relative;
            width: 15%;
            margin:inherit;
        }

          .image {
            opacity: 1;
            display: block;
            width: 100%;
            height: auto;
            transition: 1.5s ease;
            backface-visibility: hidden;
          }

        .middle {
          transition: .5s ease;
          opacity: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%)
        }

        .container:hover .image {
          opacity: 0.3;
        }

        .container:hover .middle {
          opacity: 1;
        }

        .text {
          background-color: #4CAF50;
          color: white;
          font-size: 16px;
          padding: 16px 32px;
        }

＆＃13;

<div style="width: 100%"> 
    <div class="container">
        <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar"     class="image" style="width:100%">
         <div class="middle">
             <div class="text">help</div>
        </div>
    </div>

    <div class="container">
        <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
         <div class="middle">
             <div class="text">help</div>
        </div>
    </div>

    <div class="container">
        <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
         <div class="middle">
             <div class="text">help</div>
        </div>
    </div>

    <div class="container">
        <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
         <div class="middle">
             <div class="text">help</div>
        </div>
    </div>

    <div class="container">
        <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
         <div class="middle">
             <div class="text">help</div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将.container div设置为display：inline-block。

.container{display:inline-block}

或者将整个容器div设置为display：flex。

Answer 2

将display: inline-block;插入.container样式。

.container {
            position: relative;
            width: 15%;
            margin:inherit;
            display: inline-block;
        }

          .image {
            opacity: 1;
            display: block;
            width: 100%;
            height: auto;
            transition: 1.5s ease;
            backface-visibility: hidden;
          }

        .middle {
          transition: .5s ease;
          opacity: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%)
        }

        .container:hover .image {
          opacity: 0.3;
        }

        .container:hover .middle {
          opacity: 1;
        }

        .text {
          background-color: #4CAF50;
          color: white;
          font-size: 16px;
          padding: 16px 32px;
        }

<div style="width: 100%"> 
    <div class="container">
        <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar"     class="image" style="width:100%">
         <div class="middle">
             <div class="text">help</div>
        </div>
    </div>

    <div class="container">
        <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
         <div class="middle">
             <div class="text">help</div>
        </div>
    </div>

    <div class="container">
        <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
         <div class="middle">
             <div class="text">help</div>
        </div>
    </div>

    <div class="container">
        <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
         <div class="middle">
             <div class="text">help</div>
        </div>
    </div>

    <div class="container">
        <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
         <div class="middle">
             <div class="text">help</div>
        </div>
    </div>
</div>

Answer 3

<style>
#wrapper {
    display: flex;
}

</style>

<div style="width: 100%" id="wrapper"> 
<div class="container">
    <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar"     class="image" style="width:100%">
     <div class="middle">
         <div class="text">help</div>
    </div>
</div>

<div class="container">
    <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
     <div class="middle">
         <div class="text">help</div>
    </div>
</div>

<div class="container">
    <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
     <div class="middle">
         <div class="text">help</div>
    </div>
</div>

<div class="container">
    <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
     <div class="middle">
         <div class="text">help</div>
    </div>
</div>

<div class="container">
    <img src="https://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto:best/c_limit,w_640/v1500347311/dl2shdtqxsz9zwnfkdom.png" alt="Avatar" class="image" style="width:100%">
     <div class="middle">
         <div class="text">help</div>
    </div>
</div>
</div>