Question

标题中有3个div个。

动态宽度
55px宽带背景图片
200px宽

我正在尝试让左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将展开以填充该行的其余部分。

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

1 个答案: