Martin Clark写道: > 有没有办法获得背景要停止的标题的颜色 缺少图像< divin它在IE6中的显示方式? 或者它只是可以在浮动周围流动的文本元件? H1是一个块,块元素占用整个剩余宽度,因此背景延伸到右边距。将其声明为 inline会限制元素本身的背景颜色。 使用position:relative来声明H1会导致它具有更高的z-index 值比图像和背景颜色在图像上。 没有理由声明位置:相对;对于.main,h1或 ..imageright。 使用这三个修改过的声明: 。 .main {margin:1em 2%0 34%; padding:0 0 0 1em;} ..main h1 {display:inline; background-color:#e5ebc8; font-family:Arial, Helvetica,sans-serif; font-size:100%; font-weight:600; text-align:left;填充:0.1em 0.2em 0.1em 0.5em;保证金:0.1em; border:0;} ..imageright {float:right;宽度:175px; margin-left:0.7em; margin-top: 0.2em;填充:0.1em; } - Gus Gus Richter写道...... > Martin Clark写道: >有没有办法让标题的背景颜色停止缺少图像< divin它显然在IE6中的方式?或者它只是可以在浮动周围流动的文本元件? 没有理由申报职位:亲属; for.main,h1, .imageright。 使用这三个修改过的声明: [snip] 感谢您的帮助。我把它弄清了,结果就在这里: http:/ /www.penninewaterways.co.uk/testpage2a.htm 这使彩色背景保持在< h1text的区域。 这是我将考虑的解决方案,虽然它没有给出我希望的 效果。我本来希望彩色背景 从文本向右延伸(虽然没有进入 浮动图像的区域)。当标题 全长不同时,我不确定它会不会很好看。 无论如何,谢谢你的建议。我可以继续使用它但是我会首先看看 任何其他选项! - Martin Clark Hello, I am daring to stick my head above the parapet and ask asquestion. I am working on redesigning a website to use CSS rather thantables for layout. I have come across a problem when trying to float animage to the right.For ease of looking at the problem, I have stripped away other parts ofthe page layout, and have just included the "content" section in theexamples below.The basic design of having a left column and a main column works fine inthis example: http://www.penninewaterways.co.uk/testpage1.htmYou will see that I have added a background colour to the headings.The problem comes when I add a right-floated <divcontaining an image: http://www.penninewaterways.co.uk/testpage2.htmThis appears in IE6 in the way I expected it, but in Firefox, which ofcourse renders the CSS correctly, although the text flows around theimage, the background colour overlaps it.This can be partly solved by adding z-index: 100; to the CSS for..imageright but the bands of background colour still extend beneath theimage and look silly.Is there a way to get the background colour of the headings to stopshort of the image <divin the way that it apparently does in IE6?Or is it only text that can be flowed around a floating element?The CSS file is http://www.penninewaterways.co.uk/testcss.css--Martin Clark 解决方案 Martin Clark <ma****@spl.atwrote:>Is there a way to get the background colour of the headings to stopshort of the image <divin the way that it apparently does in IE6?By giving the header a left or right margin equal to the horizontal sizeof the float and it''s horizontal padding, margin and/or border.This is not only often awkward to code for various reasons, it doesn''twork if the float and the header aren''t always fully adjacent in thevertical plane.>Or is it only text that can be flowed around a floating element?Only inline content flows around a float.--SpartanicusMartin Clark wrote:>Is there a way to get the background colour of the headings to stopshort of the image <divin the way that it apparently does in IE6?Or is it only text that can be flowed around a floating element?H1 is a block and a block element takes up the whole remaining width,therefore the background extends to the right margin. Declaring it asinline limits the background color to the element itself.Declaring H1 with position:relative causes it to have a higher z-indexvalue than the image and the background color is over the image.There is no reason to declare position:relative; for .main, h1, or..imageright .Use these three modified declarations:..main {margin: 1em 2% 0 34%; padding: 0 0 0 1em;}..main h1 {display:inline;background-color:#e5ebc8; font-family: Arial,Helvetica, sans-serif; font-size: 100%; font-weight: 600;text-align:left; padding: 0.1em 0.2em 0.1em 0.5em; margin: 0.1em;border: 0;}..imageright {float: right; width: 175px; margin-left: 0.7em; margin-top:0.2em; padding: 0.1em; }--GusGus Richter wrote...>Martin Clark wrote:> Is there a way to get the background colour of the headings to stopshort of the image <divin the way that it apparently does in IE6?Or is it only text that can be flowed around a floating element? There is no reason to declare position:relative; for .main, h1, or.imageright .Use these three modified declarations:[snip]Thanks for the help. I have tied that out and the result is here: http://www.penninewaterways.co.uk/testpage2a.htmThis keeps the coloured background just to the area of the <h1text.This is a solution that I will consider, although it does not give theeffect I was hoping for. I would have preferred the coloured backgroundto extend rightwards from the text (although not into the area of thefloated image). I''m not sure that it would look good when the headingsare all of different lengths.Thanks for the suggestion, anyway. I may go with it but I will look atany other options first!--Martin Clark 这篇关于右浮动图像的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
09-10 20:41
查看更多