2

我想将 3 个 div 对齐在一起，但我希望左侧 div 向左拉伸 100%，右侧 100% 向右拉伸，中间 div 具有固定宽度。

基本上，我正在尝试为我的网站创建一个标题，其中徽标位于中间，背景似乎永远延伸，但徽标具有透明度，所以我不能只是将一个重叠在另一个之上。

我现在已经使用下面的表格完成了这项工作，但想知道是否有更好的（css）方式来做到这一点？

真正的问题是横幅中心的徽标背景需要透明，所以我不能有任何重叠的 div？

这是我使用以下方法完成的示例，但如果可能，更愿意使用 CSS？

链接：示例

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
    <th scope="col"><img src="style/images/header_logo.png" width="122" height="123" alt="Header_logo"></th>
    <th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
    </tr>
</table>
4

2 回答 2

0

我不知道这种方法是否适用于您想要实现的目标，但您可以将图像水平居中，然后应用背景颜色，这样它将覆盖背景图像。您不应该使用空元素，它们在语义上是不正确的。不过，这取决于你。
看看这个codepen。

于 2013-01-05T21:26:02.390 回答
0

这应该适合你：

<style type="text/css>

#left, #right{
position:absolute;
top:0px;
width:50%;
height:50px;
}

#left, #headerpattern_left, #rightsticky{
left:0px;
}

#right, #headerpattern_right, #leftsticky,{
right:0px;
}

#headerpattern_left, #headerpattern_right{
position:absolute;
background:url(pattern.png) repeat-x;
width:45%;
}

#leftsticky, #rightsticky{
    position:absolute;
}

#logo{
position:relative;
width:50px;
height:50px;
margin:0px auto;
}

</style>

<body>

<div>
    <div id="left">
        <div id="headerpattern_left">
        </div>
        <div id="leftsticky>
            <img src="correctly_measured_image_of_pattern_on_left_side_of_logo.jpeg" />
        </div>
    </div>
    <div id="right">
        <div id="headerpattern_right">
        </div>
        <div id="rightsticky>
            <img src="correctly_measured_image_of_pattern_on_right_side_of_logo.jpeg" />
        </div>
    </div>
    <div id="logo">
    </div>
</div>

</body>

编辑：新建议

在我的脑海中，您可以在左右 div 中的每个 div 中创建两个 div，并创建一个 jpeg，说明图案在徽标两侧的外观应为 100px，并将它们贴在徽标旁边，然后使用相同的在 jpeg 旁边的 div 上重复背景。

这在大多数情况下应该可以工作，但在少数情况下它看起来并不完美，例如在巨大的屏幕上查看网页或缩小相当远的网页。另外，我不确定它在移动设备上的外观。

于 2013-01-05T21:01:01.007 回答