3

这对我来说很奇怪，虽然我已经搜索过，但每个人似乎都有与我相反的问题（浮动 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”和应用到它的背景颜色。

任何帮助将非常感激。

谢谢，

詹姆士

4

3 回答 3

1

You shall remove float:left and use display:inline-block instead

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

And add text-align:center in your containing div

于 2012-04-25T12:34:25.273 回答
0 
width:100%;
height:100%;

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

width:auto;
height:auto;
于 2012-04-25T11:30:13.190 回答
0

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

.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;
}
于 2012-04-25T11:52:08.417 回答