Question

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

好的，这就是我编码的页面（不是记录的最终位置） - http://stonedclassy.com/pages/page2

如您所见，页面上有6个div。我正在使用Bootstrap，它们都是span6（意味着它们在平均大小的桌面上占据了页面宽度的一半）。第一个＆＃34;行＆＃34; div完全没问题，但从第二行开始，有一个我无法摆脱的缩进。它导致第一行之后的所有后续div被强制到他们自己的行上，因为它们不能适合两行到一行。

如果我将所有div的大小更改为span5，它们可以在两行中匹配，但在第二行仍然有一个缩进。

这是html：

请注意，为了节省空间，我只包括我所指的一个SIX 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'>父级中。每个row-fluid的第一个孩子都会获得一个margin-left: 0，这会将第一个元素拉出来。每个后续元素都会获得常规margin-left值，因此它们都会正确排列。

Answer 2

bootstrap会删除跨区域中第一个跨度的边距，因此如果您放置这样的项目（就像它在页面上一样）

<div class="row-fluid">
    <div class="span-12">
        <div class="sapn-6">...
    </div>
    <div class="span-12">...</div>
    <div class="span-12">...</div>
</div>

它只会删除第一个跨度-12和第一个跨度-6的边距，并且由于跨度-12内的下一个跨度-6不是第一个具有该边距的第一个跨度-6 ，那就是为什么你有这个保证金问题。现在，要修复它，你可以删除类span-12形成＆＃34;框架，如＆＃34; div和你的问题将得到解决，响应项仍然可以工作。例如：

<div class="row-fluid">
    <div>
        <div class="sapn-6">...
    </div>
    <div>...</div>
    <div>...</div>
</div>

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

2 个答案: