Html 如何使这些元素以100%宽度并排放置

我有3张背景图片，我想和中间的一张并排坐着，中间的一张占据了不同的空间。我可以让前两个图像工作，但第三个在一个新的线休息

为了清楚起见，我需要左、右div有一个固定的宽度，中间div占100%-50px（在这种情况下，左、右div占25px）

找到了我当前的解决方案

当前成果：

HTML:

---

使用“表”和“表单元格”属性可以轻松修复此问题。更新你的CSS如下

 .wrap {
position:relative;
width:100%;
overflow:hidden;
display:table;
table-layout:fixed;
}
.wrap .left {
background:#ff00ff url(../img/banner_small_left.png) 0 0 no-repeat;
width:25px;
height:123px;
float:left;
display:table-cell;
}
.wrap .inner {
background:url(../img/banner_small_mid.png) 0 0 repeat-x;
height:123px;
display:table-cell;
overflow:hidden;
 }
.wrap .right {
background:#fff000 url(../img/banner_small_right.png) 0 0 no-repeat;
width:25px;
height:123px;
float:right;    
display:table-cell;
}

---

这里有一种使用浮动实现布局的方法

您需要修改HTML中子元素的顺序：

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="inner">
        <p>Text goes here</p>
    </div>
</div>

---

请参阅：

上的演示，效果很好，谢谢。我在使用其他方法使内部图像实际重复时遇到了困难，但这可以根据需要工作。

 .wrap {
position:relative;
width:100%;
overflow:hidden;
display:table;
table-layout:fixed;
}
.wrap .left {
background:#ff00ff url(../img/banner_small_left.png) 0 0 no-repeat;
width:25px;
height:123px;
float:left;
display:table-cell;
}
.wrap .inner {
background:url(../img/banner_small_mid.png) 0 0 repeat-x;
height:123px;
display:table-cell;
overflow:hidden;
 }
.wrap .right {
background:#fff000 url(../img/banner_small_right.png) 0 0 no-repeat;
width:25px;
height:123px;
float:right;    
display:table-cell;
}

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="inner">
        <p>Text goes here</p>
    </div>
</div>

.wrap {
    position:relative;
    width:100%;
    overflow: auto;
}
.wrap .left {
    background:url(http://placekitten.com/100/150) 0 0 no-repeat;
    width:25px;
    height:123px;
    float:left;
}
.wrap .inner {
    background: red url(http://placekitten.com/900/150) 0 0 no-repeat;
    height:123px;
    overflow: auto;
}
.wrap .right {
    background:url(http://placekitten.com/120/150) 0 0 no-repeat;
    width:25px;
    height:123px;
    float:right;    
}