CSS浮动div，不缩小到内容

Question

这对我来说很奇怪，虽然我已经搜索过，但每个人似乎都有与我相反的问题（浮动 div 缩小）！

我有这个页面：http://www.tameside.gov.uk/test/news，它使用 PHP 为各种新闻故事生成顶部的 div，并且运行良好。然而，这些项目（浮动 div）位于一个向左浮动的 div 中，由于某种原因，它并没有缩小到这些项目（这是它唯一的内容）。

据我所知，浮动 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;
}

他们还有一个跨度，里面附有一个小 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

Answer 2

width:100%;
height:100%;

是窗口大小的 100% ... 试试

width:auto;
height:auto;

Answer 3

使用绝对单位而不是百分比来定义内部元素的度量：

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