如何在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

由於它們是塊級元素，因此它們相互影響。 您可以做兩件事來解決該問題。

左右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的把戲;-)