Question

是否有可能将图像放在页面中间？
但是：在图像的右侧和左侧，有2个区域可以根据屏幕分辨率增长这些区域是＆＃34; 1像素重复-x＆＃34;图像。
请注意：右侧和左侧的图片不是相同的图片！

在带有草图的图片下面（我希望）将解释我的问题：

sketch

Answer 1

你可以像this

那样做

在.container中设置图片，现在我已经添加了示例文本。

CSS

.rightArea,
.leftArea {
  position: absolute;
  width: 50%;
  background: yellow;
  top:0;
  left:0;
  height: 100%;
}
.rightArea {
  background: red;
  right: 0;
  left: auto;
}

Answer 2

以下是使用CSS表格单元构建此布局的一种方法。

从 HTML ：

开始

<div class="wrapper">
    <div class="left"></div>
    <div class="center">
        <img src="http://placekitten.com/400/200">
    </div>
    <div class="right"></div>    
</div>

并应用以下 CSS ：

.wrapper {
    display: table;
    width: 100%;
    border: 1px solid blue;
}
.left, .center, .right {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
}
.center {
    width: 1%;
}
.left, .right {
    width: 50%;
}
.left {
    background-image: url(http://placekitten.com/4/100);
    background-repeat: repeat-x;
    background-position: left center;
}
.right {
    background-image: url(http://placekitten.com/10/100);
    background-repeat: repeat-x;
    background-position: left center;
}
.center img {
    display: block;
}

.wrapper的宽度为100％，因此它会填充页面的宽度。

子元素.left，.center和.right是表格单元格。

.center通过将宽度设置为某个较小的值（例如1％）来强制缩小以适合图像。

.left和.right元素设置为相同的宽度，50％，这会强制它们平均占用剩余空间。

您可以根据需要将背景图像应用于任何子元素。

请参阅演示：http://jsfiddle.net/audetwebdesign/pG2v3/

注意：大多数现代浏览器都支持CSS表格单元格。

Answer 3

您可以在单个容器和伪元素上进行转发。 DEMO

display:table/table-cell -properties将使这个易于管理:(使用您的图像名称/路径更新测试）

HTML

<div>
    <img src="middle.jpg" />
</div>

CSS

img {
    display:block;/* avoid gap underneath*/
    margin:auto;/*optionnal*/
}
div {
    display:table;
    width:100%;
    background:#7E858F;
}
div:before, div:after {
    content:' ';
    display:table-cell;
    width:50%;/* will shrink to leave room for image */
    background-repeat:repeat-x;
}
div:before {
    background-image:url(left.jpg);/* slice of 1px */
}
div:after {
    background-image:url(right.jpg);/* slice of 1px */
}

<强> DEMO

Answer 4

要自由增长侧面放置的div，将内容保留在中间，使用包装display: table;元素，并将内部div设置为display:table-cell，因此中心元素将根据宽度调整右边和左边的divs：

http://jsfiddle.net/4uHm8/

HTML：

<div class='wrapper'>
    <div class='left'></div>
    <div class='center'>test</div>
    <div class='right'></div>
</div>

CSS：

.wrapper {
    display: table;
    width: 100%;
    height: 200px;
}

.wrapper > div {
    display: table-cell;
}

.left {
    width: 30px;
    background: red;
}

.right {
    width: 50px;
    background: blue;
}

修改

在同一思路中，如果只设置中心div的宽度，左右div将使用剩余宽度均匀调整...甚至为零。

http://jsfiddle.net/4uHm8/1/

.wrapper {
    display: table;
    width: 100%;
    height: 200px;
}

.wrapper > div {
    display: table-cell;
}

.center {
    background: blue;
    width: 100px;
}

.left, .right {
    background: red;
}

Answer 5

<强> HTML

<div class="main">
    <div class="left">&nbsp;</div>
    <div class="image">
        <img src="http://www.ricoh.com/r_dc/r/r8/img/sample_10.jpg" height="150" width="120" alt="image" />
    </div>
    <div class="right">&nbsp;</div>
</div>

<强> CSS

.main {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.left {
    float: left;
    width: 50%;
    background: #FF0000;
}
.right {
    float: right;
    width: 50%;
    background: #FFFF00;
}
.image {
    position: absolute;
}

<强>的jQuery

$(document).ready(function () {
    $(".image").css('right', ($(".main").width() / 2) - ($(".image").width() / 2));
    $(window).resize(function() {
        $(".image").css('right', ($(".main").width() / 2) - ($(".image").width() / 2));
    });
});

示例

http://jsfiddle.net/wphn9/

页面中间的div图像，每侧有2个不同的div

5 个答案: