Question

我试图让两个div完全位于父div之内。两个子div都占用父div的高度。我试过浮动：左边和右边有边距：0自动。我不希望一个div居中，而另一个偏移一点。我希望div 1右侧位于正中心，而div 2左侧也位于正中心。（我更喜欢使用CSS，但如果需要JS就可以了。）

这是HTML：

<div class="green">
    <div class="div1">
        Div 1
    </div>
    <div class="div2">
       Div 2
    </div>
</div>

这是CSS：

.green {
    height:50px;
    width:100%;
    background-color:#9fbe3c;
}
.div1 {
    height:100%;
    width:141px;
    margin:0 auto;
}
.div2 {
    width:141px;
    height:100%;
    float:right;
    position:relative;
    top:-50px;
}

Fiddle

由于某种原因，div 2被推出父块。我尝试过显示：内联块并且没有用，所以我只使用了相对位置。

Answer 1

你可以像this

那样做

HTML

<div class="green">
    <div class="div1">
        Div 1
    </div>
    <div class="div2">
       Div 2
    </div>
</div>

CSS

.green {
    height:50px;
    width:100%;
    background-color:#9fbe3c;
  text-align: center;
}
.div1, .div2 {
    height:100%;
    width:141px;
    margin:0 auto;
  display: inline-block
}

Answer 2

尝试添加text-align: center和display: inline-block，同时删除边距/浮动逻辑。

这是修改过的小提琴：http://jsfiddle.net/Gad4C/9/

希望这有帮助。

在父div中并排对齐2个固定宽度div

2 个答案: