javascript - 调整 div 大小并对齐背景

Question

<div style="width: 600px;">  
    <div class="header">
    <img src="logo.png"/>
</div>


<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
    <div class="div3">Div 3</div>
    <div class="div4">Div 4</div>
    <div class="div5">Div 5</div>
</div>


.header
{
    height:200px;
    background-image: url('http://www.imgur.com/YLVpI.png');
    margin:0;
    width:100%;
    background-position:left;  
}
.header img
{
    margin-left:auto;
    margin-right:auto;
}
.container .div1
{
    background-color: black;
    background-position:left;  
    float:left;
    width:20%;
    margin: 0px;

}
.container .div2
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;  
    float:left;
    width:100px;
    margin:0; padding:0;
    border-bottom-left-radius: 20px;
}
.container .div3
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;  
    float:left;
    margin:0; padding:0;
}
.container .div4
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;  
    float:left;
    width:100px;
    margin:0; padding:0;
    border-bottom-right-radius: 20px;
}
.container .div5
{
    background-color: black;
    float:left;
    display:inline-block; width:90px;
    width:20%;
    margin:0;
}

有几件事我无法同时处理:

1. 使页眉占页面宽度的 100%。
2. 将 div 2 和 4 设置为 30px 的宽度。
3. 将 div 3 设置为 400px 的宽度。
4. 无论窗口有多大，都让 div 1 和 5 填充剩余空间。
5. 将所有内容居中，使其看起来不错。
6. 使背景正确对齐。

有人知道怎么做吗？ http://jsfiddle.net/jaTuu/

Answer 1

据我所知，您自己解决了 5 个问题，据我所知，如果没有无关的东西，您需要 Javascript 来完成第 4 个问题。如果无法访问您的图像，我无法尝试第 6 个问题。不过，我认为您可以自行解决。

下面是我根据您的代码提出的解决方案:

<div id="header_container" style="width: 600px;">

    <div class="header">
    <img src="logo.png"/>
</div>


<div class="container"><div class="div1">Div 1</div><div class="div2 width30">Div 2</div><div class="div3 width300">Div 3</div><div class="div4 width30">Div 4</div><div class="div5">Div 5</div>
</div> 
*
{
    padding:0;
    margin:0;
}

#header_container {
    background-color: #000;
    min-width: 100%;
}

.width30 {
    width: 30px;
}

.width300 {
    width: 300px;
}

.header
{
    height:200px; 
    background-image: url('http://www.imgur.com/YLVpI.png'); 
    margin:0;
    background-position:left;  
}
.header img
{
    margin-left:auto; 
    margin-right:auto;
}
.container
{
    text-align:center;
}
.container .div1
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;  
    display:inline-block; 
    background-color: yellow;
    width:90px;
    border-bottom-left-radius: 20px;
}
.container .div2
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;  
    background-color: purple;
    display:inline-block; 
    /*width:90px;*/
    margin:0; padding:0;
}
.container .div3
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left; 
    background-color: green;    
    display:inline-block; 
    /*width:90px;*/
}
.container .div4
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left; 
    background-color: blue;    
    display:inline-block; 
    /*width:90px;*/

}
.container .div5
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;
    background-color: orange;    
    display:inline-block; 
    width:90px;
    border-bottom-right-radius: 20px;
}

这里有几点需要注意:

假设您希望元素名称保持不同，您可以通过添加按上述定义大小的类来修改元素的宽度。如果你这样做，就像我所做的那样，你将不得不删除你在 CSS 中定义的元素的宽度(也在上面显示)。

还有一点要注意:您似乎正在尝试做一个导航菜单。如果是这种情况，使用列表来表示元素可能是更好的主意。