需要溢出：一邊可見光和溢出：隱藏在底側

我想最終的結果看起來是這樣： https://dl.dropbox.com/u/65978956/Capture.JPG 需要溢出：一邊可見光和溢出：隱藏在底側

的#logo像位於DIV。第裏面有一些文字溢出分區。
#logo圖片的位置必須相對於.page div的位置，以便它始終按照圖片上的方式定位。

問題是，因爲我只能得到#logo重疊時，我將其位置設置爲絕對。頁面div不再自動調整與垂直內容的大小。

溢出-x和溢出y值不允許我實現我所期待的

body { 
    background-color: beige; 
} 

.page { 
    margin: auto; 
    position: relative; 
    width: 984px; 
    min-height: 800px; 
} 

#logo { 
    background-image: url(../Content/Site_Images/logo.png); 
    background-repeat: no-repeat; 
    height: 444px; 
    left: -98px; 
    margin-top: 5px; 
    opacity: 0.7; 
    position: absolute; 
    width: 381px; 
    z-index: -1; 
}

和我的視圖文件：

<body> 
    <section class="Page"> 
    <figure id="logo"></figure> 

    @*--Other omitted sections--*@ 
    ..... 
    ..... 
    </section> 
</body>

我應該怎麼做才能獲得期望的效果。

感謝您的幫助

編輯。

的jsfiddle：http://jsfiddle.net/ngsEG/1/

如何看內容不調整大小和圖像是否正確dispalyed。如果我添加overflow：隱藏到.page部分，那麼頁面調整大小，但圖像溢出也被隱藏。

來源

2012-07-30 JoonasL

請創建一個jsFiddle示例：http://jsfiddle.net – 2012-07-30 15:01:40

目前還不清楚您期待的行爲。我不明白「logo」絕對會如何影響'page'內容的veritcal大小。您的標題提到了「溢出」問題，但您的文本沒有提及「溢出」。 Alex W所要求的小提琴也不錯，但主要是更清楚地表達你期望的東西。 – ScottS 2012-07-30 15:11:32

將jsFiddle添加到我的帖子 – JoonasL 2012-07-30 15:13:55

好的，您發佈的小提琴很明顯，您的問題與徽標的absolute位置無關。相反，您的@*--Other omitted sections--*@及其CSS是問題，即float在#MainContent未被包裝.Page元素。由於您試圖對徽標進行的操作，我同意，overflow: hidden或auto的典型修補程序在此處不起作用。但是，舊的clearfix解決方案應該。所以：

.Page:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

See the fiddle.

注意：如果需要IE7或更小的支持，看到上面的clearfix鏈接的附加信息。

來源

2012-07-30 15:40:58 ScottS

非常感謝，先生。我完全忘記了float會破壞元素流。 .Page：方法工作後，但我最終更改了float：left #MainContent中的display：block並使其以這種方式工作。 – JoonasL 2012-07-30 16:06:19

@ JoonasL - 哦，是的，如果你不需要'漂浮'它，不要！這是一個更好的解決方案;我只是假設你有'浮動'的原因。 – ScottS 2012-07-30 16:14:17

需要溢出：一邊可見光和溢出：隱藏在底側

回答

相關問題