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，不縮水到內容

回答

相關問題