将两个div粘贴到另一个

Question

这是我试图实现的目标。 我有3个div。我们称他们为左中右。中心div的宽度是动态的。它可以是100px，200px等，这取决于中央div所持有的图像。 如何做到这一点，无论中心div大小，左侧和右侧的div都要坚持中心div？

Answer 1

有点像http://jsfiddle.net/t3Gjx/？

HTML：

<div class="wrapper"> 
    <div class="left">Left</div> 
    <div class="center"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/8/80/A-Caracas.png" alt="img" /> 
    </div> 
    <div class="right">Right</div> 
</div> 

CSS：

.wrapper{ 
    text-align:center; 
    border:2px solid blue; 
    font-size:0; 
} 

.wrapper>div{ 
    display:inline-block; 
    text-align:left; 
    vertical-align:top; 
    border:2px solid red; 
    font-size:16px; 
} 

编辑：

正如佐尔坦托特说，如果窗宽小于组合宽度的元件，它们将垂直堆叠而不是在彼此旁边。

如果你不希望出现这种情况，添加

.wrapper{ 
    white-space:nowrap; 
} 

见这里：http://jsfiddle.net/t3Gjx/1/

Answer 2

您可以使用侧面的元素绝对定位 - DEMO

HTML

<div id="center"> 
    <div id="left"></div> 

    <img src="http://lorempixel.com/200/200" /> 

    <div id="right"></div> 
</div> 

CSS

#left, #right { 
    width: 100px; 
    background: orange; 
    height: 200px; 
    position: absolute; 
    top: 0; 
    left: -100px; 
} 

#right { 
    left: 100%; 
} 

#center { 
    margin-left: 100px; /* width of the left div */ 
    position: relative; 
    display: inline-block; 
}