div不在同一行对齐？ [复制]答案

【问题标题】：divs are not aligned in the same row? [duplicate]div不在同一行对齐？ [复制]
【发布时间】：2018-09-19 05:28:19
【问题描述】：

我有一个引导布局问题，我不知道如何解决。

在我的页面上，我展示了 6 辆最近的汽车，在桌面视图中，我希望每行有 3 辆汽车，因此每辆汽车都位于引导 div 容器中：col-md-4 col-sm -6 col-xs-12

汽车图像具有响应性。虽然调整后的图像大小相同，但如果汽车的原始分辨率略有不同，我的桌面布局就会扭曲，如下所示。

下面可以看到html & css代码

<div class="container">
<!-- Section Header -->
<div class="section-header">
  <h3>Son Eklenen Arabalar</h3>
  <p>Farklı bütçe ve ihtiyaçlara göre zengin araba seçeneklerimizi görmek için, satılık araçlar bağlatısına tıklayabilirsiniz. Aşağıda son eklenen araçlarımızdan kısaca örnekleri görmektesiniz.</p>
</div><!-- Section Header /- -->

<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2016-audi-a3-a3-sedan-1-6-tdi-sport-line-dizel-otomatik-beyaz-379" title="2016 Audi A3İncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5244/_MG_0230.jpg?1523107625" alt="sahibinden satılık araba 2016 Audi A3 A3 Sedan 1.6 TDI Sport Line Dizel Otomatik 19000 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2016-audi-a3-a3-sedan-1-6-tdi-sport-line-dizel-otomatik-beyaz-379" title="2016 Audi A3İncele">
        <h3>Audi A3</h3>
        <span>2016</span>
        <span>Dizel</span>
        <span>Otomatik</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2013-hyundai-i30-1-6-crdi-style-dizel-otomatik-beyaz-378" title="2013 Hyundai i30İncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5229/_MG_0208.jpg?1523106439" alt="sahibinden satılık araba 2013 Hyundai i30 1.6 CRDi Style Dizel Otomatik 42840 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2013-hyundai-i30-1-6-crdi-style-dizel-otomatik-beyaz-378" title="2013 Hyundai i30İncele">
        <h3>Hyundai i30</h3>
        <span>2013</span>
        <span>Dizel</span>
        <span>Otomatik</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2017-peugeot-3008-1-6-bluehdi-allure-dizel-otomatik-kirmizi-373" title="2017 Peugeot 3008İncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5199/_MG_0981.jpg?1517238228" alt="sahibinden satılık araba 2017 Peugeot 3008 1.6 BlueHDi Allure Dizel Otomatik 8000 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2017-peugeot-3008-1-6-bluehdi-allure-dizel-otomatik-kirmizi-373" title="2017 Peugeot 3008İncele">
        <h3>Peugeot 3008</h3>
        <span>2017</span>
        <span>Dizel</span>
        <span>Otomatik</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2014-citroen-c-elysee-1-6-hdi-attraction-dizel-manuel-beyaz-376" title="2014 Citroen C-Elyseeİncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/4534/_MG_0133.jpg?1506524742" alt="sahibinden satılık araba 2014 Citroen C-Elysee 1.6 HDi Attraction Dizel Manuel 117220 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2014-citroen-c-elysee-1-6-hdi-attraction-dizel-manuel-beyaz-376" title="2014 Citroen C-Elyseeİncele">
        <h3>Citroen C-Elysee</h3>
        <span>2014</span>
        <span>Dizel</span>
        <span>Manuel</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-beyaz-374" title="2015 Skoda Octaviaİncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5208/_MG_0966.jpg?1517238488" alt="sahibinden satılık araba 2015 Skoda Octavia 1.6 TDI Style CR Dizel Otomatik 53000 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-beyaz-374" title="2015 Skoda Octaviaİncele">
        <h3>Skoda Octavia</h3>
        <span>2015</span>
        <span>Dizel</span>
        <span>Otomatik</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-siyah-372" title="2015 Skoda Octaviaİncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5183/_MG_0956.jpg?1517237745" alt="sahibinden satılık araba 2015 Skoda Octavia 1.6 TDI Style CR Dizel Otomatik 73000 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-siyah-372" title="2015 Skoda Octaviaİncele">
        <h3>Skoda Octavia</h3>
        <span>2015</span>
        <span>Dizel</span>
        <span>Otomatik</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->

.inventroy-box {
    text-align: center;
    margin-bottom: 30px;
}
@media (min-width: 992px)
.col-md-4 {
    width: 33.33333333%;
}

img {
    max-width: 100%;
    height: auto;
}

img {
    border: 0;
    vertical-align: middle;
}

你能指导我如何解决这个问题吗？

【问题讨论】：

尝试将图像宽度设置为 100%
请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决或您链接的站点无法访问，这个问题将对未来的访问者失去任何价值。发布证明您的问题的Minimal, Complete, and Verifiable example (MCVE) 将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
添加了 html & css

标签： html css twitter-bootstrap-3

【解决方案1】：

要使引导类正常工作，它们必须包含在具有 row 类的 <div> 中。此处示例：

<div class="row">
    <div class="col-lg-4 col-sm-6"></div>
    <div class="col-lg-4 col-sm-6"></div>
    <div class="col-lg-4 col-sm-6"></div>
</div>

【讨论】：

【解决方案2】：

这是由于图像或内容的高度不规则造成的。我想你想要这样的东西： https://prnt.sc/j302vm 假设您正在使用此代码。

<div class='row'>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
</div>

所以您需要在右侧第一个 div 处应用清除两个属性。

所以应用这个 css：

    @media(min-width: 992px){
    .col-md-4:nth-of-type(3n+1){
    clear:both;
    }
  }
    @media (min-width: 768px) and (max-width:991px){
     .col-sm-6:nth-of-type(2n+1){
        clear:both;
        }
    }

【讨论】：