你如何为这些div编写css？

Question

可以说我有三个部分的横幅，第1部分和第3部分是曲线边缘图像，第2部分是水平矩形图像。它看起来像

part1 ... part2 ... part3 

第一部分和第三部分是其图像的尺寸，但第2部分应该有一个重复的背景图像，使得第2部分的宽度的DIV调整到浏览器的宽度，使旗帜可调节到任何宽度的浏览器。你如何为这三个div编写css，以便它们一起创建任意长度的横幅？

Answer 1

你的意思是这样的吗？

请参阅demo fiddle。

HTML：

<div class="banner"> 
    <span></span> 
    <span></span> 
</div> 

CSS：

.banner { 
    height: 120px; 
    background: url('middle-part-of-banner.png') repeat-x; 
    overflow: hidden; 
} 
.banner span { 
    display: inline-block; 
    width: 140px; 
    height: 120px; 
    background: url('end-parts-of-banner.png') no-repeat; 
} 
.banner span+span { 
    background-position: -580px 0; 
    float: right; 
} 

Answer 2

你可能会与风格中间BG尝试。

你可以试试吗？您可能需要稍微调整其他样式属性。 如果您在此处显示左侧和右侧图像，我可以用确切的代码来帮助您。

.bg{ 
    background-image:url("path_to_repeating_bg");background-repeat:repeat-x;width:auto} 
} 

<div id="banner" style="clear:both"> 
    <div style="float:left"> 
     <img src="<left_img_path>" /> 
    </div> 
    <div class="bg" style="float:left;width:auto"> 
    </div> 
    <div style="float:left"> 
     <img src="<right_img_path>" /> 
    </div> 
</div> 

Answer 3

试试这个demo

<div class="banner"> 
    <div class="part1"> 

    </div> 

    <div class="part2"> 

    </div> 

    <div class="part3"> 

    </div> 
</div> 

CSS：

div.banner{ 
    width:100%; 
} 
div{ 
    display:inline; 
    height:100px; 
    solid:red; 
    float:left; 
} 
div.part1{ 
    width:2%; 
    border-raduis:5px; 
    background:red; 
} 
div.part3{ 
    width:2%; 
    background:red; 
} 
div.part2{ 
    width:96%; 
    background:blue; 
} 

只是改变了第一部分的背景下，第2部分和第三部分的背景图片，你有。

Answer 4

我喜欢使用：之前和之后的这些东西。它保持了HTML的清洁，让我的头脑更有意义。

HTML：

<div id="banner"></div> 

CSS：

#banner { 
    height: 100px; 
    background: url(http://placekitten.com/1/100) repeat-x left top; 
    position: relative; 
    z-index:1 
} 

#banner:before, #banner:after { 
    content: ''; 
    height: 100px; 
    width: 100px; 
    position: absolute; 
    top: 0; 
    z-index: 2; 
} 

#banner:before { 
    left: 0; 
    background: url(http://placekitten.com/100/100) no-repeat left top; 
} 

#banner:after { 
    right: 0; 
    background: url(http://placekitten.com/100/100) no-repeat left top; 
} 

的jsfiddle：http://jsfiddle.net/blineberry/3BapK/