将两个div粘贴到另一个div上 [英] Stick two divs to another

问题描述

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

解决方案

类似于 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.pngalt =img/> 
< / div> 
< div class =right> Right< / div> 
< / div> 
  

CSS：

  .wrapper {
 text-align：center; 
 border：2px纯蓝色; 
 font-size：0; 
} 
 
 .wrapper> div {
 display：inline-block; 
 text-align：left; 
 vertical-align：top; 
 border：2px纯红色; 
 font-size：16px; 
} 
  

编辑： $ b

正如Zoltan Toth所说，如果窗口宽度小于元素合并宽度，它们将垂直堆叠，而不是彼此旁边。

如果你不想这样做，请添加

  .wrapper {
 white-space：nowrap; 
} 
  

请在此处查看： http://jsfiddle.net/t3Gjx/1/

Here is what I'm trying to achieve. I have 3 divs. Let's call them left center and right. The width of center div is dynamic. It could be 100px, 200px etc depending of the image that center div hold. How to do so the left and the right divs to be stick to the center div regardless of the center div size ?

解决方案

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

Edit:

As Zoltan Toth said, if the window width less then the elements combined width, they will stack vertically and not beside each other.

If you don't want that, add

.wrapper{
    white-space:nowrap;
}

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

这篇关于将两个div粘贴到另一个div上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！