将两个div固定在另一个div上

Question

这是我想要实现的目标。 我有3个div，分别称为左、中、右。中间div的宽度是动态的，它可能是100px、200px等，这取决于中间div所包含的图像大小。 如何使左侧和右侧div始终粘附在中心div上，而不受中心div大小的影响？

- roperdo

---

如果您想要侧边栏是流体的，而中心div是固定宽度的，请查看此链接：https://dev59.com/m1nUa4cB1Zd3GeqPY0ei - sabithpocker

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

See it here: http://jsfiddle.net/t3Gjx/1/

- Oriol

---

如果窗口宽度小于元素组合宽度，则它们将垂直堆叠而不是并排。 - Zoltan Toth

@ZoltanToth 已修复，使用 white-space:nowrap。 - Oriol

Answer 2

您可以使用绝对定位来放置侧边元素 - 演示

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

- Zoltan Toth