1

我有这个代码：

<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，所以我的问题希望很容易解决（交叉手指）

4

4 回答 4

3

正如其他人所提到的，您缺少float: left(remove top// right/ values)bottom或.leftposition: absolute

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

如果您希望宽度和填充都具有流动性，则不需要此技巧。只需对两者都使用百分比测量值，因此总数为 50%（例如，width: 48%; padding: 1%）。

于 2013-07-01T00:59:26.483 回答
1

你真的只需要浮动你的内部 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/

于 2013-07-01T01:04:53.790 回答
1

你在寻找这样的东西吗？

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

   <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%
}
于 2013-06-30T23:50:03.623 回答
1

我相信这个小提琴可以解决你的问题。错误是您没有浮动 div。

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

注意：如果要使用top, left & right属性定位元素，则必须设置它们的position: absolute.

于 2013-07-01T00:14:46.233 回答