動態內容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中添加的元素之間有一個空白區域，您需要刪除空白區域或添加動態添加的空白元素。

在下面的例子中我已經刪除car-preview元件之間的空白：

$(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