Question

我试图连续放置3个div [1] [2] [3]。

[1]应该有一个重复到左边的背景图片

[2]必须居中。它的1000像素

[3]应该有一个重复到右边的背景图像

问题是[1]出现在[2]，[3]下方[3]的顶部，[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;
}

Answer 1

您需要在div中包含某些内容才能显示背景图像。你不能只有背景图像的空div ... 如上所述，尝试在div上设置宽度和高度，你可以将一些文本放在里面，可能与背景图像颜色相同。或者你可以在div中放置一个宽度/高度合适的透明图像，然后将背景图像放在...

之后

是的，向左漂浮！

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

Answer 2

将所有浮点数更改为

  float:left;

将三个元素水平堆叠在一起。

Answer 3

您需要将“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应该删除float：center;并添加保证金：0自动;

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

Answer 4

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

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

对于您的背景图片 - 您是否尝试过设置#topleft和#topright的宽度和高度？

3个div连续背景

4 个答案: