CSS浮动DIV，不缩水到内容

这是很奇怪的我，虽然我已经搜查，大家似乎有相反的问题，我（一个浮动的div萎缩）！CSS浮动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有仅“浮动：左”和施加到其上的背景颜色。

任何帮助将不胜感激。

感谢，

詹姆斯

来源

2012-04-25 James R

任何机会，你可能下降的相关部分中心（渲染）HTML和CSS到一个[JS小提琴]（http://jsfiddle.net/），如果需要Lorem-ipsum-ed内容？这样我们可以玩它，*和*在一个地方看代码。 – 2012-04-25 11:17:14

嗨，这是JS小提琴：http://jsfiddle.net/W8Dn6/，似乎也在那里做同样的事情。 – 2012-04-25 14:02:14

对，我制作了顶级新闻项目div固定宽度，并使用JavaScript动态设置包含div的宽度，并使用margin：auto对其进行居中。我不知道为什么最初的想法不工作，我希望使用这种方法：http://www.tightcss.com/centering/center_variable_width.htm居中，因此不需要JavaScript并给出液体布局。但由于某种原因，即使这种方法不起作用，当我使顶部项目固定宽度（和浮动如预期）。如果任何人都可以得到它与液体布局工作，我真的很感激它。 – 2012-04-26 08:32:15

width:100%; 
height:100%;

是窗口大小的100％...... 尝试

width:auto; 
height:auto;

来源

2012-04-25 11:30:13

你的意思是在跨度？跨度只有100％的divs，他们的想法是使divs链接。但他们不应该超越包含这些跨度的新闻项目。我试着添加一个自动宽度的容器，看看是否有帮助 – 2012-04-25 14:06:00

嗨，我试着添加宽度：自动到容器，但只适用于IE 9兼容模式，所以不是一个解决方案我'我害怕。 – 2012-04-26 07:09:38

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

.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-25 11:52:08

嗨，感谢你，出于某种原因，它的工作原理。你知道为什么它可以用像素而不是百分比吗？理想情况下，我会希望它是流动的，而不是固定的，所以如果任何人都可以用它来使用百分比，我会很感激。 – 2012-04-26 07:20:24

-1

只要快速查看一下您的页面，并快速修复将新闻报道置于顶端的方法是添加剩余空间：20％;到包含新闻报道的div的内联风格。

希望能够解决您的问题。

来源

2012-04-25 11:57:32 insightinternet

嗨，其实我的问题是关于使任何数量的新itms中心（最多5个）。所以这只能解决4个项目。 – 2012-04-25 15:26:54

嗨，詹姆斯你可以加载你需要居中的物品的最大数量，我会再看看它吗？ – insightinternet 2012-05-04 13:58:51

您应删除浮动：左和使用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

来源

2012-04-25 12:34:25

编辑：上面测试的解决方案，它的工作原理... – 2012-04-25 12:53:05

嗨，我会尝试这个，但我不认为如果我没有记错，IE 7识别内联块，我需要它在所有浏览器中工作，甚至可怕的。 – 2012-04-25 14:13:45

嗨，我已经尝试过这种解决方案，它的工作类型，虽然水平不再水平对齐，我认为我使用的'整个div链接'跨越一定会造成一些奇怪的行为。此外，因为我怀疑IE 7和IE 9兼容模式不理解它。不幸的是，有些人仍然在IE 7中浏览我们的网站，并且所有员工都将IE默认为兼容模式，这要感谢Microsoft自动将所有内部页面设置为兼容模式。因此这对我来说不是一个解决方案。 – 2012-04-26 07:16:54

CSS浮动DIV，不缩水到内容

回答

相关问题