css - 围绕图像的DIV（可能很容易回答）

Question

我div在标题中有 3 秒。

1. 动态宽度
2. 55px 宽，带背景图片
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两边的 s 对齐以适应曲线，背景图像流过曲线。我遇到的问题是 right 和 center divs 下降到 left 下方div，即使它们正确排列以使尺寸正确。高度和边距只是为了让所有东西都对齐，但现在可以忽略，这样我至少可以让所有东西都在同一条线上。提前感谢您的帮助。

Answer 1

只需切换您div的 s 的顺序，它们就会按照您的意愿行事：

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

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