javascript - 并排内联 block div，最后一个错误地在中间对齐

Question

我将响应式 div 成对并排垂直对齐。我正在使用内联 block 而不是 float 。顺便说一句，我不能使用 flex。 在下面的示例中，我有 5 个 div，但最后一个 (div5) 位于中间而不是向左对齐。我不明白为什么。

有什么建议吗？

发生的事情是:

div1  div2
div3  div4  
   div5   

instead of:

div1 div2
div3 div4
div5

CSS 和 HTML:

div-container{
  margin: 0 auto;
  width: 95%;
}
    
div{
  display: inline-block;
  width: 48%;
  margin-right: 4%;
  margin-bottom: 4%;
}
    
div:nth-child(2n+2) {
  margin-right: 0;
}


  
       

<div class="div-container"><div>
     <div class="image-box">
       <a href="#" title="tile">
                        <img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
                      </a>
                    </div>
    
                    <div class="content-box">
                      <div class="text-box">
                          <a href="#" title="card">
                            <h3>Hea</h3>
                          </a>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
                      </div>
                    </div>
                  </div>
    
     <div>
                   <div class="image-box">
                      <a href="#" title="tile">
                        <img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
                      </a>
                    </div>
    
                    <div class="content-box">
                      <div class="text-box">
                          <a href="#" title="card">
                            <h3>Hea</h3>
                          </a>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
                      </div>
                    </div>
                  </div>
    
     <div>
                   <div class="image-box">
                      <a href="#" title="tile">
                        <img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
                      </a>
                    </div>
    
                    <div class="content-box">
                      <div class="text-box">
                          <a href="#" title="card">
                            <h3>Hea</h3>
                          </a>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
                      </div>
                    </div>
                  </div>
    
     <div>
     <div class="image-box">
                      <a href="#" title="tile">
                        <img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
                      </a>
                    </div>
    
                    <div class="content-box">
                      <div class="text-box">
                          <a href="#" title="card">
                            <h3>Hea</h3>
                          </a>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
                      </div>
                    </div>
                  </div>
    
     <div>
                    <div class="image-box">
                      <a href="#" title="tile">
                        <img class="img-teaser" src="./img/partner1.png" alt="Partner 1 image">
                      </a>
                    </div>
    
                    <div class="content-box">
                      <div class="text-box">
                          <a href="#" title="card">
                            <h3>Hea</h3>
                          </a>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies non nisi id pellentesque. </p>
                      </div>
                    </div>
                  </div>
    </div>

Answer 1

尝试将 text-align: left; 添加到 div-container