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;
}

有几件事我无法同时工作：

使标题跨度为页面宽度的100％。
使div 2和4各设置宽度为30px。
使div 3的设置宽度为400px。
无论窗口有多大，都让div 1和5填充剩余的空间。
将所有东西都放在中心，看起来不错。
正确对齐背景。

有谁知道怎么做？ 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中定义它们时删除元素的宽度（也在上面显示）。

还有一点需要注意：好像你正试图做一个导航菜单。如果是这种情况，最好使用列表来表示项目。

Answer 2

尝试将所有背景图像居中。

background: url('http://www.imgur.com/YLVpI.png') center center;

喜欢这个演示：http://jsfiddle.net/ongisnade/PThcc/

调整div和调整背景

2 个答案: