我在一行中有四张图片。 HTML代码为： < div id =" header"> < div class =" header_image"> < img id =" home_logo" SRC ="图像/ home_logo.gif" ALT ="" /> < / div> < div class =" header_image"> < img id =" acc_spinning_logo" src =" images / acc_spinning_logo.gif" alt ="" /> < / div> < div class =" header_image"> < img id =" acc_logo_end" SRC ="图像/ acc_logo_end.gif" ALT ="" /> < / div> < div class =" header_image" id =" header_image_4"> < img id =" title_bar_right" src =" images / title_bar_right.gif" alt ="" /> < / div> < / div> 在我的CSS文件中，我使用float：离开以确保它们出现在相同的 行。我的问题是，虽然我希望前三张图像显示为 它们的宽度，但是我希望第四张图片可以延伸 屏幕的其余部分，无论如何屏幕宽度。这可以用CSS来完成吗？ 谢谢， Don
Hi, I have four images lined p on a single row. The HTML code is: <div id="header"> <div class="header_image"> <img id="home_logo" src="images/home_logo.gif" alt="" /> </div> <div class="header_image"> <img id="acc_spinning_logo" src="images/acc_spinning_logo.gif" alt="" /> </div> <div class="header_image"> <img id="acc_logo_end" src="images/acc_logo_end.gif" alt="" /> </div> <div class="header_image" id="header_image_4"> <img id="title_bar_right" src="images/title_bar_right.gif" alt="" /> </div> </div> In my CSS file, I use float:left to ensure they appear on the same row. My question is, while I want the first three images to appear at the width they are, I''d like the forth to stretch the rest of the screen regardless of the screen width. Can this be done sing CSS? Thanks, Don
推荐答案< do*@fivestarterminals写信息 新闻：2e **************************** ****** @ m45g2000 hsb.googlegroups ... <do*@fivestarterminalswrote in message news:2e**********************************@m45g2000 hsb.googlegroups... 我有四张图片排成一排。 HTML代码为： < div id =" header"> < div class =" header_image"> < img id =" home_logo" SRC ="图像/ home_logo.gif" ALT ="" /> < / div> < div class =" header_image"> < img id =" acc_spinning_logo" src =" images / acc_spinning_logo.gif" alt ="" /> < / div> < div class =" header_image"> < img id =" acc_logo_end" SRC ="图像/ acc_logo_end.gif" ALT ="" /> < / div> < div class =" header_image" id =" header_image_4"> < img id =" title_bar_right" src =" images / title_bar_right.gif" alt ="" /> < / div> < / div> 在我的CSS文件中，我使用float：离开以确保它们出现在相同的 行。我的问题是，虽然我希望前三张图像显示为 它们的宽度，但是我希望第四张图片可以延伸 屏幕的其余部分，无论如何屏幕宽度。这可以唱CSS吗？ Hi, I have four images lined p on a single row. The HTML code is: <div id="header"> <div class="header_image"> <img id="home_logo" src="images/home_logo.gif" alt="" /> </div> <div class="header_image"> <img id="acc_spinning_logo" src="images/acc_spinning_logo.gif" alt="" /> </div> <div class="header_image"> <img id="acc_logo_end" src="images/acc_logo_end.gif" alt="" /> </div> <div class="header_image" id="header_image_4"> <img id="title_bar_right" src="images/title_bar_right.gif" alt="" /> </div> </div> In my CSS file, I use float:left to ensure they appear on the same row. My question is, while I want the first three images to appear at the width they are, I''d like the forth to stretch the rest of the screen regardless of the screen width. Can this be done sing CSS?
首先你的HTML太冗长了。其次，如果它真的是标题，它应该标记为一个（在下面的例子中我假设它是主页面 标题，所以h1）。第三，你不需要浮动：如果你没有将图像包装在一个额外的div中，那么你可以将它们放在相同的 行上，因为图像是内联的 默认情况下。第四，如果徽标的图像包含任何文本，那么 文本应该在alt属性中。最后，您可以通过将图像作为背景图像来获得图像以填充 ，这将自动重复。 这样的事情应该这样做： < style type =" text / css"> h1 { background：url（title_bar_right.gif）repeat-x; } < / style> < h1>< img src =" images / home_logo.gif" ; ALT ="标志" />< img src =" images / acc_spinning_logo.gif" alt =" spinning logo" />< img src =" images / acc_logo_end.gif" alt =" logo end" />< / h1>
Firstly your HTML is too verbose. Secondly if it really is a header it should be marked up as one (in the example below I assume it''s the main page header, so h1). Thirdly you don''t need float: left to make them on the same row if you don''t wrap the images in an extra div because images are inline by default. Fourthly if the image of the logo contains any text, then that text should be in the alt attribute. Lastly you can get the image to fill the width by making it a background image, which will repeat automatically. Something like this should do it: <style type="text/css"> h1 { background: url( title_bar_right.gif ) repeat-x; } </style> <h1><img src="images/home_logo.gif" alt="logo" /><img src="images/acc_spinning_logo.gif" alt="spinning logo" /><img src="images/acc_logo_end.gif" alt="logo end" /></h1>
文章 < 2e ************** ******** @ m45g2000hsb。 googlegroups>， " do*@fivestarterminals" < do*@fivestarterminalswrote： In article <2e**********************************@m45g2000hsb. googlegroups>, "do*@fivestarterminals" <do*@fivestarterminalswrote: 我在一行上有四张图片。 HTML代码为： < div id =" header"> < div class =" header_image"> Hi, I have four images lined p on a single row. The HTML code is: <div id="header"> <div class="header_image">
....
....
> 在我的CSS文件中，我使用float：left确保它们出现在同一行 行。我的问题是，虽然我希望前三张图像显示为 它们的宽度，但是我希望第四张图片可以延伸 屏幕的其余部分，无论如何屏幕宽度。这可以用CSS来完成吗？ > In my CSS file, I use float:left to ensure they appear on the same row. My question is, while I want the first three images to appear at the width they are, I''d like the forth to stretch the rest of the screen regardless of the screen width. Can this be done sing CSS?< dorayme.890m/alt/three_and_stretch.html> - dorayme
<dorayme.890m/alt/three_and_stretch.html> -- dorayme
谢谢，但它并没有完全奏效。 ）我在3张图片之间有间隙。 2）不显示背景图片。 这是HTML代码： ---------------------------------- < ; div id =" header_logo"> < img src =" images / home_logo.gif" ALT ="标志" /> < img src =" images / acc_spinning_logo.gif" alt =" spinning logo" /> < img src =" images / acc_logo_end.gif" alt =" logo end" /> < / div> 这是CSS代码 --------- ---------------------- #header_logo { 保证金：0; 填充：0; background-image：url（../ images / title_bar_right.gif） background-repeat：repeat-x; } 谢谢， Don Thanks but It doesn''t work completely. 1) I''m getting gaps between the 3 images. 2) The background image is not displayed. Here is the HTML code: ---------------------------------- <div id="header_logo"> <img src="images/home_logo.gif" alt="logo" /> <img src="images/acc_spinning_logo.gif" alt="spinning logo" /> <img src="images/acc_logo_end.gif" alt="logo end" /> </div> Here is the CSS code ------------------------------- #header_logo { margin: 0; padding: 0; background-image: url(../images/title_bar_right.gif ) background-repeat: repeat-x; } Thanks, Don
更多推荐
如何获取图像以填充行宽的其余部分？
发布评论