html - 有人可以解释为什么我的 div 在第一行之后缩进吗？

Question

这里有一个很奇怪的问题。我不知道这是否相关，但我正在使用 Shopify - 这在过去一直是导致奇怪问题的原因。

好的，这是我正在编写代码的页面(不是记录的最终位置)- http://stonedclassy.com/pages/page2

如您所见，页面上有 6 个 div。我正在使用 Bootstrap，它们都是 span6(这意味着它们在平均大小的桌面上占据了页面宽度的一半)。 div 的第一“行”非常好，但是从第二行开始，有一个缩进我无法摆脱。这会导致第一行之后的所有后续 div 被迫到它们自己的行中，因为它们不能适合二对一的行。

如果我将所有 div 的大小更改为 span5，它们能够容纳两个到一行，但仍然有一个从第二行开始的缩进。

这是 html:

请注意，为了节省空间，我只包括了我所指的六个 div 之一。完整的代码实际上就是这段代码重复六次

<div class="span6 majorimgtesting">
<a href="">
    <div class="ghostrowforcategories span6"> <button class="ghostbuttonforcategories">TESTING</button> </div>
    <img src="//cdn.shopify.com/s/files/1/0654/2811/products/clear-hammer-bubbler-water-pipe-stonedclassy_large.jpg?v=1422320684" class="imgtesting" />
    <img src="//cdn.shopify.com/s/files/1/0654/2811/products/Micro-Mini-Water-Pipe-Stonedclassy_5571a18d-b3ed-457d-b180-f36cf3acb2b3_large.jpg?v=1423018550" class="imgtesting"  />   
</a>

这是 CSS:

.majorimgtesting
{
  max-height:250px;
  overflow:hidden;
  border-left: 1px solid black;
  border-right: 1px solid black;
  margin-bottom: 50px;
  opacity: .9;
  transition: .5s ease;
  float: left;
}

.majorimgtesting:hover
{
  transition: .5s ease;
  opacity: 1;
}

.imgtesting
{
  max-width: 50%;
  display: block;
  float: left;
  z-index:-1;
}

.ghostrowforcategories 
{
  width: 100%;
  position: absolute;
  display: inline-block;
  padding-bottom: 10px;
  text-align: center;
}

.ghostbuttonforcategories
{
  display: inline-block;
  border-radius: 2px;
  border: none;
  height: 45px;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  background-color: #666105;
  color: white;
  border: 1px solid #666105;
  float: middle;
  z-index: 5;
  opacity: .8;
}

.ghostbuttonforcategories:hover
{
  background-color: #666105;
  color: white;
  z-index: 5;
}  

Answer 1

你所有的divs包含在单个 <div class='row-fluid'> 中 parent 。每个row-fluid的第一个 child 得到 margin-left: 0这是将第一个元素拉出线。每个后续元素都获得常规 margin-left值，以便它们都适本地排列。