Question

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

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;
}

Answer 1

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

从视觉上讲，这种情况正在发生：

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

如果在典型的浏览环境中使用min-height保证长度，或者甚至table s（ew！），那么在CSS中解决这个问题并不是一个好方法。

然而，有一个JavaScript解决方案。这是一个名为Masonry的jQuery插件。我推荐这种情况。

值得注意的是，无论有多少列（移动环境，宽屏幕显示器等），Masonry都可以帮助保持列显示的一致性。

Answer 2

是浮动问题。

包含＆＃34; DuSable非裔美国人历史博物馆＆＃34;比其他div更高。所以它推动下一行的div。

我们可以做的两件事

1）为每个div设置一个固定的高度例如：将hegiht: 300px;或类似的东西添加到div.entry

2）如果无法达到固定高度，则在html标记中每隔3个div后添加<div style="clear:both"></div>。

Answer 3

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

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

限制：

与表格或（更好）display: table-cell;相反，你的积木不会真正具有相同的高度。在白色背景上，一切都很顺利，d_r_w描述的浮动问题已经消失，但如果你在每个框周围添加背景或边框，你会发现它们各自都有其内容的高度。例如，您仍然可以在前3行添加比任何内容更短的背景。

以％为单位的混合宽度和px中的填充容易使得3 div大于100％（对于许多视口宽度）。 :(你最好只使用％（部分完成小提琴）

inline-block将输出空格作为空格，例如两个span之间的任何空格。如果您不想要这些~4 px（3 * 33.33％+ 3 * 4px> 100％宽度和 badaboom ，请参见上文），您需要在每个div之间添加HTML注释{ {1}}或模板中输出NO whitespace，nil，nada（并为同事添加评论，说明为什么这样做）。

为每行/每行请求额外div的其他解决方案：</div><div>
兼容性：IE8 +，并回到IE6 / 7的“内联块”（即display: table; /* and table-row and table-cell */等于那些旧浏览器上的内联块）

不需要的行缩进css

3 个答案: