Html 一行3个有背景的div

我想把3个div排成一行[1][2][3]

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

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

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

问题是[1]出现在[2]的顶部，[3]出现在[2]的下方，[1]和[3]的背景图像不会出现。如果我只是放置一种颜色而不是图像，它就会出现（路径是正确的）

HTML:

---

将所有浮动更改为

  float:left; 

---

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

您需要将“右上角”移动到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足够大，可以显示背景图像。

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

如果希望#top与#top left和#top right位于同一行，则它需要是浮动元素，而不是.container

---

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

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

是的，向左浮动

---

尝试以百分比为单位设置div的宽度。通过这种方式，他们应该在屏幕大小/分辨率后自动调整。

我通过将顶部右上方置于顶部容器上方，成功地将div放在同一行上。此外，还通过指定高度，我可以让背景图像出现，但如果没有提到宽度，它们就不会重复。问题是，我需要它们按照屏幕分辨率的需要重复，所以我不能提到宽度。有什么帮助吗？@miraco如果你用百分比来表示宽度呢？然后它应该在屏幕后进行调整。考虑到中心div有1000px，左和右div应该有多少百分比？此外，一个问题可能是左div背景图像位于中间div图像的下方（该图像部分透明，因此您可以在下方看到另一个图像）。

  float:left; 

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

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

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