css - DIV 周围图像(可能很简单的答案)

Question

我在标题中有 3 个 div。

1. 动态宽度
2. 55 像素宽，带背景图片
3. 200 像素宽

我试图让左边的 div 填充水平宽度的其余部分，我已经阅读了一些答案，但我似乎无法将它们放在同一行上.我目前有:

CSS

body{
    background-color:#666;
    color:#666;
    margin:0;
    padding:0;
}
.container{
    width:80%;
    min-width:755px;
    margin:0 auto;
    background-color:#333;
    background:url(img);
}


.headerLeft{
    background-color:#333;
    height:64px;
    margin-right:255px;
}
.headerCenter{
    background:url(img);
    width:55px;
    height:79px;
    float:right;
}
.headerRight{
    background-color:#333;
    height:65px;
    width:200px;
    margin-top:14px;
    float:right;
}

HTML

<div class="container">
    <div class="header">
        <div class="headerLeft">dfg</div>
        <div class="headerRight">dfg</div>
        <div class="headerCenter">dfg</div>
    </div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

图像本身只是一条曲线，两侧的 div 对齐以适应曲线，背景图像流过曲线。我遇到的问题是右边和中间的 div 下降到左边的 div 下方，即使它们正确排列以便大小应该正确.高度和边距只是为了让所有东西都排成一行，但现在可以忽略，这样我至少可以让所有东西都在同一条线上。在此先感谢您的帮助。

Answer 1

只需切换 div 的顺序，它们就会按照您的意愿运行:

<div class="headerRight">dfg</div>
<div class="headerCenter">dfg</div>
<div class="headerLeft">dfg</div>

您现在的问题是 .headerLeft 在文档流中出现在其他 div 之前。一旦 .headerRight 和 .headerCenter 排在前面，.headerLeft 将扩展以填充该行的其余部分。