0

我正在尝试将 3 个 div 放在一行 [1][2][3] 中。

[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;
}
4

4 回答 4

1

您需要在 div 中有一些东西才能显示背景图像。你不能有只有背景图像的空 div... 就像上面说的，尝试在 div 上设置宽度和高度，你可以在里面放一些文本，可能与背景图像的颜色相同。或者您可以在 div 内放置一个具有正确宽度/高度的透明图像，然后将背景图像放在后面......

是的，漂浮在所有东西上！

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

于 2013-03-09T04:15:37.830 回答
0

将所有花车更改为

  float:left;

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

于 2013-03-08T23:58:22.083 回答
0

您需要将 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 auto；

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

于 2013-03-09T00:00:37.540 回答
0

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

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

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

于 2013-03-09T00:03:22.340 回答