需要溢出：一边可见光和溢出：隐藏在底侧

我想最终的结果看起来是这样： 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

需要溢出：一边可见光和溢出：隐藏在底侧

回答

相关问题