html - 2 つの div を別の div に貼り付ける

Question

これが私が達成しようとしていることです。私は3つの部門を持っています。それらを左中央と右と呼びましょう。中央の div の幅は動的です。中央の div が保持する画像に応じて、100px、200px などになる可能性があります。中央の 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;
}

編集：

Zoltan Toth が言ったように、ウィンドウの幅が要素を組み合わせた幅よりも小さい場合、それらは垂直に積み重ねられ、互いに横にはなりません。

それを望まない場合は、追加してください

.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;
}