0 
<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/

4

2 回答 2

0

Try to centering all background images.

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

Like this demo: http://jsfiddle.net/ongisnade/PThcc/

于 2012-10-05T06:57:20.243 回答
0

据我所知，您自己解决了 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 中定义的元素的宽度（也如上所示）。

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

于 2012-10-05T04:34:49.313 回答