動的コンテンツCSSスタイルが静的コンテンツと一致しません

Question

動的コンテンツのリスト（jQuery）を生成しようとしていますが、動的コンテンツのCSSが静的コンテンツと一致しません。

最初の3つの項目は、次の3は、動的であり、を

注の間の任意の間隔を有していない行い、間に小さなスペースで、それぞれ、静的である：両方が同じCSSにリンクされ

---

Codepen Link

静的実装：

<div class="car-preview"> 
    <img src="https://www.google.com/photos/about/static/images/google.svg"> 
    <div class="car-details"> 
     <p>Holden Commodore Blah Blah 
     <br><span>$10000</span></p> 
     <ul> 
     <li>10000km Driven</li> 
     <li>1.5L 4Cyl Petrol Engine</li> 
     </ul> 
    </div> 
    </div> 

ダイナミック実装：

$(document).ready(function() { 
for(var i = 0; i < 3; i++){ 
$(".filter-content").html($(".filter-content").html() 
    + '<div class="car-preview">' 
    + '<img src="https://www.google.com/photos/about/static/images/google.svg">' 
    + '<div class="car-details">' 
     + '<p>Holden Commodore Blah Blah<br><span>$10000</span></p>' 
     + '<ul>' 
     + '<li>10000km Driven</li>' 
     + '<li>1.5L 4Cyl Petrol Engine</li>' 
     + '</ul>' 
    + '</div>' 
    + '</div>'); 
} 
}); 

---

私は、今しばらくの間、この上の任意の助けを事前に

おかげで立ち往生してきました。

Answer 1

これは、htmlで直接追加された要素間に空白があるため、空白を削除するか、動的に追加された空白要素を追加する必要があるからです。詳細について

$(document).ready(function() { 
 
\t for(var i = 0; i < 3; i++){ 
 
    $(".filter-content").html($(".filter-content").html() 
 
     + '<div class="car-preview">' 
 
     + '<img src="https://www.google.com/photos/about/static/images/google.svg">' 
 
     + '<div class="car-details">' 
 
      + '<p>Holden Commodore Blah Blah<br><span>$10000</span></p>' 
 
      + '<ul>' 
 
      + '<li>10000km Driven</li>' 
 
      + '<li>1.5L 4Cyl Petrol Engine</li>' 
 
      + '</ul>' 
 
     + '</div>' 
 
     + '</div>' 
 
    ); 
 
    } 
 
});

* { 
 
    font-family: Arial; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.main-content { 
 
    width: 955px !important; 
 
    background-color: white; 
 
    padding: 10px; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
 
    margin: 0 auto 40px auto; 
 
} 
 

 
.main-content .content-area { 
 
    text-align: center; 
 
    padding: 0 10px 10px 10px; 
 
    display: flow-root; 
 
} 
 

 
.car-preview::before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    background:linear-gradient(transparent 260px, white); 
 
} 
 

 
.car-preview { 
 
    margin: 10px 0 0 0; 
 
    border: 1px solid rgba(0, 0, 0, 0.3); 
 
    display: inline-block; 
 
    background-color: #f6f6f6; 
 
    height: 300px; 
 
    width: 300px; 
 
    position: relative; 
 
    box-sizing: content-box; 
 
} 
 

 
.car-preview img { 
 
    height: 200px; 
 
    width: 300px; 
 
} 
 

 
.car-details { 
 
    border-top: 1px solid rgba(0, 0, 0, 0.3); 
 
    height: 100px; 
 
    padding: 5px; 
 
    overflow: hidden; 
 
} 
 

 
.car-details p { 
 
    color: #555; 
 
    border-bottom: 1px solid rgba(0, 0, 0, 0.3); 
 
    margin-bottom: 5px; 
 
} 
 

 
.car-details p span { 
 
    color: rgba(0, 0, 0, 0.3); 
 
} 
 

 
.car-details ul { 
 
    max-height: 65px; 
 
} 
 

 
.car-details ul li { 
 
    list-style: none; 
 
    color: #666; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="main-content"> 
 
    <div class="filter-content content-area"> 
 
     <div class="car-preview"> 
 
     <img src="https://www.google.com/photos/about/static/images/google.svg"> 
 
     <div class="car-details"> 
 
      <p>Holden Commodore Blah Blah 
 
      <br><span>$10000</span></p> 
 
      <ul> 
 
      <li>10000km Driven</li> 
 
      <li>1.5L 4Cyl Petrol Engine</li> 
 
      </ul> 
 
     </div> 
 
     </div><!-- 
 
    --><div class="car-preview"> 
 
     <img src="https://www.google.com/photos/about/static/images/google.svg"> 
 
     <div class="car-details"> 
 
      <p>Holden Commodore Blah Blah 
 
      <br><span>$10000</span></p> 
 
      <ul> 
 
      <li>10000km Driven</li> 
 
      <li>1.5L 4Cyl Petrol Engine</li> 
 
      </ul> 
 
     </div> 
 
     </div><!-- 
 
    --><div class="car-preview"> 
 
     <img src="https://www.google.com/photos/about/static/images/google.svg"> 
 
     <div class="car-details"> 
 
      <p>Holden Commodore Blah Blah 
 
      <br><span>$10000</span></p> 
 
      <ul> 
 
      <li>10000km Driven</li> 
 
      <li>1.5L 4Cyl Petrol Engine</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
</div>

インラインブロックとの間のスペースを削除する[方法のread this