水平地在多个div之间添加空格

Question

我尝试了很多方法，看看我是否可以解决这个问题但是我不想做我想做的事情。我尝试了边距，填充，浮动什么都行不通我不知道我做错了但是如果有人能告诉我如何在这些div之间添加空间而不会像这样混淆我会非常感激。

这个推荐书有这一切。

1. Div id oc-testi包含所有内容。
2. 1个div类，名为Testimonials。 这是一张图片，告诉你我有什么，它看起来是一团糟。 我已经将宽度设置为450px，因为我喜欢这个尺寸但是你可以看到我所做的图像在其他内容之上。解决这个问题的最简单方法是什么。



推荐书的CSS代码

.testimonial {
  position: relative;
  color: #424242;
  width: 450px;
  letter-spacing: 0px;
  padding: 20px;
  border: 1px inset rgba(0, 0, 0, 0.28);
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  opacity: .80;
  filter: alpha(opacity=60);
  /* For IE8 and earlier */
}

这是第一个推荐的HTML代码

<div class="oc-item">
  <div class="testimonial">
    <div class="testi-image">
      <a href="#">
        <img src="images/testimonials/img3.jpg" alt="Customer Testimonails">
      </a>
    </div>
    <div class="testi-client">
      <p class="testi-client-verified">VERIFIED CLIENT</p>
    </div>
    <div class="testi-content">
      <p>The best airport car service in Houston. I wouldn't use any other. Their drivers are pleasant and professional. They arrive early for my pick-up and get me to the airport in great time. I recommend them highly.</p>
      <div class="testi-meta">
        John A Richardson
        <span style=" margin-left: -13px;">Senior Geoscientist</span>
        <div class="rating-testi">
          <img class="rating-testi" src="images/testimonials/rating_small.png" alt="">
          <span class="testi-ratings" style="margin-left: -13px;">5.0 out of 5.0</span>
          <div class="verified_check">
            <img class="checkmark" src="images/testimonials/small_check.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我遇到的唯一问题是在每个div或推荐书之间添加空格。

Answer 1

我不知道你试试但是你应该设置边距。

<强>已更新

.testimonial {
 position: relative;
 color: #424242;
 width: 450px;
 letter-spacing: 0px;
 padding: 20px;
 border: 1px inset rgba(0, 0, 0, 0.28);
 border-radius: 10px 10px 10px 10px;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 opacity: .80;
 filter: alpha(opacity=60);
/* For IE8 and earlier */
 margin-left: 10px;

}

Answer 2

在不知道完整代码的情况下很难说，但问题似乎是你的三个固定宽度.testimonial - div不适合他们（太窄）的父容器。

快速解决方法是将其宽度设置为33％（并添加box-sizing: border-box），但可能您需要更多的微调以获得令人满意的结果。

Answer 3

要达到预期效果，请使用以下CSS

  .oc-item .testimonial{
             margin-right:15px/*controls space between testimonials*/
        }

Codepen供参考 - http://codepen.io/nagasai/pen/ZOpeea