Question

我有这段代码：

<div style="margin: 0px; padding: 0px;">

<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; left: 0; margin-bottom: 10px; position: relative;">
....
</div>

<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; right: 0; margin-bottom: 10px; position: relative;">
....
</div>

</div>

我的最终目标是让两个盒子共享50％的宽度，并在它们之间留有余量。

相反，它们显示在彼此之下，我不想要。他们似乎不尊重他们的指定位置值。（我甚至将两者的宽度设置为仅40％，因此不是所有使用空间的问题。）

供参考：我选择不使用浮动，因为我不希望它们在彼此之下重新对齐。我选择不使用表格显示，因为我想要IE7兼容性。我从来没有做过很多CSS，所以我的问题很容易解决（交叉手指）

Answer 1

正如其他人所提到的，您错过了float: left（删除top / right / bottom / left值）或position: absolute

如果您希望宽度是流动的但是填充要固定（反之亦然），那么您需要width: 50% box-sizing: border-box。这使的填充部分为50％。

如果你想要宽度和填充都是流畅的，那么这个技巧就没有必要了。只需对两者使用百分比测量值，因此总数为50％（例如width: 48%; padding: 1%）。

Answer 2

您是否在寻找this之类的内容？

在上面的链接中查看演示。

   <div class="box1">X</div>
   <div class="box2">X</div>

CSS

   * {
  margin: 0;
  padding: 0;

}


.box1 {
  width: 48%;
  background-color: white;
  border:1px solid black;
 }

.box2 {
  width: 48%;
  background-color: white;
  border:1px solid black;
 }


.box1, .box2 {
  display: inline-block;
  margin: auto;
}


@media screen and (max-width: 300px){
  .box1, .box2 {
    width: 46%;
    float: right;
    display: inline-block;
    margin-right: 1%
}

Answer 3

我相信this fiddle可以解决您的问题。错误是你没有浮动div。

块级别元素在未浮动时永远不会彼此相邻放置，除非绝对定位或固定。

注意：如果您想使用top, left & right属性定位元素，则必须设置position: absolute。

Answer 4

你真的只需要浮动你的内部div，使其更容易一些，添加box-sizing属性。

让我们说这个HTML：

<div class="box"></div>
<div class="box"></div>

然后只需添加以下内容：

.box {
  float: left;
  width: calc(50% - 5px);
  margin-right: 5px;
  padding: 8px;
  border: 1px solid #aaaaaa;
  box-sizing: border-box;
}

.box:last-child {
  margin: 0 0 0 5px;
}

使用calc()，您必须减去每个.box的边距。并且使用box-sizing属性是为了避免将边框和填充添加到宽度，这是CSS框模型的默认行为。您应该查看caniuse以查看兼容性和供应商前缀的使用。

真的不仅仅是一种做同样事情的方法。但我认为这是实现目标的一种非常可靠的方式。

http://jsfiddle.net/gVwar/

两个盒子各占50％的宽度

4 个答案: