Question

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

我有这个页面：http://www.tameside.gov.uk/test/news，它使用PHP在顶部为各种新闻故事生成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;
}

CSS浮动div，而不是缩小到内容

3 个答案: