Question

如何让两个div以50％的宽度并排坐着？

HTML 的

<div class="big_div">
    <div class="pic_1 pix">
        <img src="pic1" width="50%" height="30%"/>
    </div>
    <div class="pic_2 pix">
        <img src="pic2" width="50%" height="30%"/>
    </div>
</div>

CSS

.pix{
    display:inline;
}

请评论，正确步骤中的任何逻辑都有帮助。

Answer 1

如果您不想使用花车，那么您可以使用display: table技术。它可以让您继续添加更多，并且它们可以完美地贴合容器。

您需要删除图片上的内嵌百分比宽度和高度。

.big_div {
  display: table;    
}
.pix{
  display: table-cell;
  width: 1%;
  vertical-align: middle;
}

img {
  width: 100%;
  height: auto;
}

<强> Demo

Answer 2

如果您不想使用float，请使用display:inline-block（此处为JSFiddle。）

<强> CSS

.big_div { font-size:0; }

.pix{
    display:inline-block;
    width:50%;
}

.pix img { width:100%; }

我们必须将font-size设置为0，否则div之间会有空格（more information。）

Answer 3

Working fiddle

我在html上稍微改了一下并使用了css：

.big_div {    
    width: 100%;
    height: 100%;
}

img {
    width:50%;
    height:30%;
    float: left;
}

或者您可以使用display: inline-block并在父元素

上设置font-size:0

Fiddle

Answer 4

不要设置宽度＆amp;图像标签上的高度。将它们保持在100％，如果你这样做会扭曲图像。

使.pix类宽度为50％并向左或向右浮动。它不能是内联和保持宽度。 div必须保持显示：阻止布局。

无论如何，这是一个例子http://jsfiddle.net/bamboo/T3p7h/1/

.big_div {
    width: 60%;
    margin: 0 auto;
    background: #00B7FF;
}

.pix {
    width: 50%;
    float: left;
}

2个内联div，50％宽度崩溃？

4 个答案: