动态内容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() {
	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