CSS float div，不缩小到内容

Question

这对我来说很奇怪，虽然我已经搜索过，但每个人似乎都有与我相反的问题(一个 float 的 div 收缩)!

我有这个页面:http://www.tameside.gov.uk/test/news ，它使用 PHP 在顶部为各种新闻故事生成 div，并且工作正常。然而，元素( float div)位于向左浮动的 div 中，出于某种原因，它不会缩小到那些元素(它们只是内容)。

据我所知， float 的 div 总是缩小到它的内容，但这个特殊的 div 似乎扩展到页面的 100%。我已将包含的 div 的背景涂成灰色以向您展示我的意思。

我希望它缩小到内容，这样我就可以使用居中技巧，然后无论顶部新闻项中有多少 div，它都会将 div 居中。但因为它没有收缩，所以这个技巧显然不起作用。

每个新闻元素 div 的 CSS 如下:

.news-top-item {
    border-radius: 10px;
    border-color: #3f7dae;
    border-style: solid;
    border-width: 2px;
    float: left;
    width: 19%;
    text-align: center;
    margin-right: 0.5%;
    height: 13em;
    padding-top: 0.5em;
    cursor: pointer;
    position: relative;
}

他们内部还有一个 span，上面附加了一些 CSS，使整个内容成为一个链接:

.news-top-item span {
    display: inline;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 2;
    background-image: url('/tmbc_images/include/1pixel.gif');
    cursor: pointer;
}

我怀疑这是干扰，但以防万一。

外层 div 只有“float: left”和应用的背景色。

如有任何帮助，我们将不胜感激。

谢谢，

詹姆斯

Answer 1

您应该删除 float:left 并改用 display:inline-block

.news-top-item {
    border-radius: 10px;
    border-color: #3f7dae;
    border-style: solid;
    border-width: 2px;
    display:inline-block;
    width: 19%;
    text-align: center;
    margin-right: 0.5%;
    height: 13em;
    padding-top: 0.5em;
    cursor: pointer;
    position: relative;
}

并在包含的 div 中添加 text-align:center