我要成对地将响应的div并排垂直对齐。我用的是内联块而不是浮点数。我不能用flex btw。
在下面的例子中,我有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>

最佳答案

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

关于javascript - 并排Inline-block div,最后一个错误地在中间对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40908210/

10-11 12:50
查看更多