不需要的行缩进css

我的列表中有一个不需要的空间。代码如下，但我有大约8行3列列表，但最后一行第一列表项导致不需要的空间。几乎看起来它完全移动到下一列，没有任何东西在它的位置。不知道为什么。除了最后一行，列表工作正常。任何帮助？不需要的行缩进css

HTML

<div id="museums" class="clearfix"> 

     <div class="entry"> 
      <p>The Art Institute of Chicago</p> 
      <p>Art</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/2/edit">Edit</a><br /> 
       <a href="/museums/2" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/2">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>The Field Museum</p> 
      <p>Natural History</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/3/edit">Edit</a><br /> 
       <a href="/museums/3" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/3">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Museum of Contemporary Art</p> 
      <p>Art</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/4/edit">Edit</a><br /> 
       <a href="/museums/4" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/4">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Museum of Science and Industry</p> 
      <p>Science and Technology</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/5/edit">Edit</a><br /> 
       <a href="/museums/5" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/5">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Adler Planetarium</p> 
      <p>Universe</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/6/edit">Edit</a><br /> 
       <a href="/museums/6" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/6">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>The Chicago History Museum</p> 
      <p>History</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/7/edit">Edit</a><br /> 
       <a href="/museums/7" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/7">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Museum of Broadcast Communications</p> 
      <p>Radio and Television</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/8/edit">Edit</a><br /> 
       <a href="/museums/8" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/8">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>The Shedd Aquarium</p> 
      <p>Marine Life</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/9/edit">Edit</a><br /> 
       <a href="/museums/9" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/9">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>The Notebaert Nature Museum</p> 
      <p>Nature</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/10/edit">Edit</a><br /> 
       <a href="/museums/10" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/10">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>DuSable Museum of African American History</p> 
      <p>African American History</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/11/edit">Edit</a><br /> 
       <a href="/museums/11" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/11">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Frank Lloyd Wright Home and Studio</p> 
      <p>Architecture</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/12/edit">Edit</a><br /> 
       <a href="/museums/12" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/12">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>National Museum of Mexican Art</p> 
      <p>Mexican Culture</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/13/edit">Edit</a><br /> 
       <a href="/museums/13" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/13">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Jane Addams Hull House Museum</p> 
      <p>Social Welfare </p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/14/edit">Edit</a><br /> 
       <a href="/museums/14" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/14">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Abraham Lincoln Museum</p> 
      <p>History</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/15/edit">Edit</a><br /> 
       <a href="/museums/15" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/15">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Rebecca's Test Museum</p> 
      <p>Test</p> 
      <p>St. Paul, 
      Minnesota</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/16/edit">Edit</a><br /> 
       <a href="/museums/16" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/16">View</a> 
      </div> 
     </div> 
</div>

CSS

div.entry { 
    position: relative; 
    width: 30%; 
    float: left; 
    margin: 0 30px 10px 0; 
    padding: 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 

} 

div.entry p:first-child { 
    width: 290px; 
    line-height: 1.2em; 
    font-size: 25px; 
    color: #E07951; 
    margin-bottom: 3px; 
    padding: 0px; 
} 

div.entry p:nth-child(2) { 
    font-size: 17px; 
} 

div.entry p { 
    font-size: 15px; 
    line-height: 1.4em; 
    margin: 0px; 
    margin-bottom: 3px; 
    padding: 0px; 
} 

.edit { 
    padding-top: 10px; 
}

来源

2012-03-03 Nerdysyntax

我在那里看不到您的列或行吗？你能给我们一个jsfiddle或其他网站的例子代码？ – tkone 2012-03-03 23:47:52

发布生成的HTML和所有CSS。 – j08691 2012-03-04 00:01:02

为你制作了一个jsFiddle：http://jsfiddle.net/mQrnS/ – doctorless 2012-03-04 00:12:52

@d_r_w很好地解释了漂浮物的问题。

您可以尝试display: inline-block; vertical-align: top;在每个块上。
Here is a fiddle

限制：

违反表或（更好）display: table-cell;，你的块不会真的是相同的高度。在白色背景下，一切都很好，d_r_w描述的花车问题已消失，但如果您在每个框的周围添加背景或边框，则会看到它们各自具有其内容的高度。例如，您仍然可以添加比任何内容短的背景，例如前三行。
对于许多视口宽度，以px为单位混合宽度和填充容易使3 div大于100％。 :(你最好只使用％（在小提琴部分完成）
inline-block将输出空白的空间，因为两个span之间，也就是说，任何空白，如果你不希望这些〜4 PX（3 * 33.33％+ 3 * 4px> 100％宽度和badaboom，请参阅上文），您必须在每个div </div><div>之间添加HTML注释或在模板中输出NO空白，nil，nada（并为您的注释添加注释为什么这就像做）的同事

其他的解决方案，将要求额外的DIV每行/列：display: table; /* and table-row and table-cell */
兼容性：IE8 +，并回到“inline-block的”为IE6/7 （即display: inline; zoom: 1;等于这些旧浏览器上的内联块）

来源

2012-03-04 00:43:37 FelipeAls

我不得不说这是获胜的答案。添加一个高度给了我每个列表底部的奇怪填充，但是这个技巧给了我相等的空间。谢谢 – Nerdysyntax 2012-03-04 00:58:52

这是由于的方式浮动元素工作。它根据您在HTML中的顺序确定从左到右的顺序，但倒数第二行的元素实际上比右侧的元素长，所以当下一行出现时，它会将以下元素放在最合理（到浏览器）的位置中，该位置直接位于直接行的右下方。这导致最后一个项目出现，好像它是一个新行。

视觉上来说，这是发生：

+-+-+-+ 
|A|B|C| 
+-+-+-+ 
|D|E|F| 
| +-+-+ 
+-+G|H| 
|I+-+-+ 
+-+

短期使用min-height的有在典型的浏览环境有保证的长度，或者甚至table S，有没有解决的好办法（EW！）这在CSS中。

但是，有一个javascript解决方案。这是一个名为Masonry的jQuery插件。我推荐它用于这种情况。

另外值得一提的是，无论可能有多少列（移动环境，宽屏幕显示器等），砌体可以帮助列显示保持一致。

来源

2012-03-04 00:19:31 doctorless

哇，这正是它的样子。我尝试了砌体，但由于某些原因，masonry.js不支持rails 3.1.3。那么它有点，但不是在所有的浏览器和调整杀死它。我希望有一个CSS解决方案。 – Nerdysyntax 2012-03-04 00:28:43

奇怪的是，调整支持大小是默认选项。您是否有动态显示在页面上的新元素？有触发重组的支持，但它必须绑定到您正在执行的任何事件（例如向您的收藏中添加项目）。 – doctorless 2012-03-04 00:32:57

我不知道。当它使用相同的脚本$（'＃museums'）。masonry（{itemSelector：'.entry'}）;,它可以工作。但是，当我调整大小时，只有一个列列表，这发生在其他浏览器上。 – Nerdysyntax 2012-03-04 00:45:29

这是浮动问题。

包含“DuSable美国黑人历史博物馆”的div比其他div更大。所以它从下一行推动divs。

两件事情我们可以做

1）设置每个DIV 如固定高度：添加hegiht: 300px;或某事像，要div.entry

2）如果固定的高度是不可能的，再加入在HTML标记的每个第三个div之后的<div style="clear:both"></div>。

来源

2012-03-04 00:20:43

（1）的缺点在于，一个人的默认浏览器设置上的不同字体大小会严重影响元素的显示方式。（2）唯一的缺点是屏幕尺寸缩小时不起作用。如果你有移动设备，只有两列的空间，这仍然会面临行不匹配问题。 – doctorless 2012-03-04 00:25:02

哇，所有这些只是浮动水平列表。吮吸闪光正在结束，这从来不是一个问题那里大声笑。 – Nerdysyntax 2012-03-04 00:32:33

增加了一个高度，它看起来很好，但我担心它的缺点。 – Nerdysyntax 2012-03-04 00:46:36

不需要的行缩进css

回答

相关问题