如何并排跨越两个 div 以获得全屏宽度？
关于并排 div 有很多问题。我没有错过那些。但我需要一些跨越屏幕整个宽度的东西。情况是这样的：
我需要三个并排放置的 div。我们将它们称为左、中、右 div。中间的 div 包含网站的标题内容，并且宽度固定 (800px)。我希望左右 div 跨越两侧屏幕宽度的其余部分。所以..
<-左-> |中 | <-右->
我想这样做的原因是因为中间（内容保存）div 的背景是渐变的。假设渐变的左侧是白色，右侧是黑色。我需要左侧 div 为白色，以便它是延续，右侧 div 为黑色。这样一来，它看起来就像一个横跨屏幕整个宽度的流体标题。
谢谢。
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我曾经实现的这个问题的解决方案是使用 2 个 div 元素，绝对定位，并以中心 div 作为覆盖层。我这里有一个工作示例：
jsFiddle 解决方案
这样，屏幕有多宽并不重要：div 占屏幕的 50%，中间部分位于居中 div 的后面。
请注意，您可能必须使用 JavaScript 解决方法来解决高度问题。
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
您想要左侧或右侧 div 中的内容吗？如果没有，只需坚持使用一个中心 div，给它一个宽度并在 css 中使用
margin: 0 auto;定位它。然后，您可以使用半白半黑的图像（例如 1 像素 x 2400 像素）设置 body 标记的背景图像。如果您希望在标题后面产生这种效果，那么您可以创建一个与标题高度相同的 div，并为其指定以下 css 属性：
这样它应该位于容器（中间）div 后面。
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using
margin: 0 auto;in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
that way it should sit behind your container (middle) div.
您应该考虑只使用一个居中的 div，并在主体上放置一张高度为 1px、宽度足够大且居中的背景图像。该图像的左半部分为白色，右半部分为黑色。
希望这有帮助，阿林
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
无论如何，我认为不使用桌子是不可能的。
通常浮动 div 的大小是固定的，而中心 div 是可变的。
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.