如何在1 div内并排制作2个div并占据页面的宽度？

Question

您好，我试图让我的2个div占据我的所有页面;并排成一行。

这是我的代码。 JsFiddle.net/Ld8XK/1/

<div id="about">
  <div id="about1">
    hi
  </div>
  <div id="about2">
    hi
  </div>
</div>

我已尝试过

宽度：50％;

在＃about1，＃about2上，但它会让它们彼此相互影响。

Answer 1

尝试将此添加到CSS文档中：

#about1,
#about2 {
    display: inline;
}

Answer 2

应用CSS display:inline-block应该可以解决问题。

Answer 3

他们互相攻击，因为他们是block level元素。你可以做两件事来解决这个问题。

左侧或右侧float或display:inline / display:inline-block使它们并排排列。

就个人而言，我更喜欢浮动元素，就像在jsfiddle

中一样

Answer 4

这是因为填充包含在宽度中。 （5％x 2）

尝试：

width: 40%;

Answer 5

嗯...... 5％的填充是问题（在小提琴中），要么删除填充，要么将宽度调整为40％。

Answer 6

首先，您需要将主<div>设置为相对位置的块：

#about {
    position: relative;
}

然后，将内部div设置为绝对定位块：

#about1 {
    position: absolute;
    left: 0;
    width: 50%;
}
#about2 {
    position: absolute;
    right: 0;
    width: 50%;
}

另一种方法是使用@ hobenkr的技巧; - ）