连续3个div与背景

我想把3个div连成一行[1] [2] [3]。连续3个div与背景

[1]应该有一个背景图像重复向左

[2]必须居中。其1000像素

[3]应当具有背景图像重复向右

的问题是，[1]显示在顶部[2]，[3]以下[2]和背景图像因为[1]和[3]没有出现。如果我只是放一个颜色而不是图像，它会出现（路径是正确的）。

HTML：

<div id="topleft">left</div> 
<div id="top" > 
     <div class="container"/> 
      <div id="header">Menu</div> 
     </div> 
</div> 
<div id="topright">right</div>

CSS：

#topleft { 
    background-image: url(images/leftrepeat.png); 
    background-repeat: repeat-x; 
    float: left; 
} 

#top .container { 
    background-image:url(images/center.png); 
    background-repeat:no-repeat; 
    min-height:151px; 
    width:1000px; 
    float: center; 
} 

#topright { 
    background-image: url(images/rightrepeat.png); 
    float: right; 
    background-repeat: repeat-x; 
}

来源

2013-03-08 miraco

我设法通过topcontainer获得顶部的权利，将div放在同一行上。另外，通过指定高度，我可以获取背景图片，但不会在没有提及宽度的情况下重复。问题是我需要他们根据需要重复屏幕分辨率，所以我不能提到宽度。任何帮助？ – miraco 2013-03-09 07:15:56

为了让背景图像出现，您需要在div内有一些东西。你不能有只有背景图像的空白div ... 像上面说的那样，尝试在div上设置宽度和高度，并且可以将一些文本与背景图像颜色相同。或者你可以把正确的宽度/高度在div内的透明图像，然后背景图像后面...

是的，漂浮在所有！

试着用百分比来设置div的宽度。这样他们应该在屏幕尺寸/分辨率之后自动调整。

来源

2013-03-09 04:15:37 Lisa

@miraco如果将宽度设置为百分比，那么该怎么办？然后它应该在屏幕后调整.. – Lisa 2013-03-09 08:29:50

考虑到中心div有1000px，左右div有多少百分比？此外，一个问题可能是左divs背景图像在中心div图像下（这是部分透明的，所以你可以看到下面的其他图像）。 – miraco 2013-03-09 12:15:27

更改所有浮到

float:left;

将水平地堆叠在彼此旁边的三个要素。

来源

2013-03-08 23:58:22 suspectus

您需要将您的“topright” HTML中的“容器”上述

<div id="topleft"> 
    left 
</div> 

<div id="topright"> 
    right 
</div> 

<div id="top" > 
     <div class="container"/> 
      <div id="header"> 
      Menu 
      </div> 
     </div> 
</div>

然后CSS为您的容器应删除浮动：中心;并添加边距：0 auto;

至于图像，只要确保它们应该出现的路径，并且div足够大以显示背景图像。

来源

2013-03-09 00:00:37

float:center;无效 - 要将元素放在同一行上，您可以将它们全部左移。对于最右边的元素（#topright），您可以选择将其右移，具体取决于您的布局。

如果您希望#top与#topleft和#topright位于同一行，它需要是浮动元素，而不是.container。

为了您的背景图像 - 你有没有尝试为#topleft和#topright设置宽度和高度？

来源

2013-03-09 00:03:22 mgrahamjo

连续3个div与背景

回答

相关问题