將兩個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; 
}