Question

我有3个div，main，right和left。主div包含右和左div，我想并排左右div。我在这里看过几篇文章，但未能取得理想的结果。

https://jsbin.com/lagikaxiwe/edit?html,css,output

html,
body {
  margin: 0;
  padding: 0;
}

div#main-content {
  background-color: bisque;
  height: 100%;
}

div#right-content {
  position: relative;
  width: 35%;
  height: 100%;
  background-color: #ffffff;
}

div#left-content {
  position: absolute;
  width: calc(100% - 35%);
  height: 100%;
  margin: 0px 0px 0px 666px;
  background-color: #00aeef;
}

<div id="main-content">
  <div id="right-content">
  </div>
  <div id="left-content">
  </div>
</div>

Answer 1

现在最简单的方法是在容器上使用display: flex。看看我的代码片段中的设置 - 我删除了很多其他设置，这些都不是必需的......

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

div#main-content {
  background-color: bisque;
  height: 100%;
  display: flex;
}

div#right-content {
  width: 35%;
  height: 100%;
  background-color: red;
}

div#left-content {
  width: 65%;
  height: 100%;
  background-color: #00aeef;
}

<div id="main-content">
  <div id="right-content">
  </div>
  <div id="left-content">
  </div>
</div>

Answer 2

html,
body {
  margin: 0;
  padding: 0;
}

div#main-content {
      background-color: bisque;
      height: 100%;
      width: 100%;
}

div#right-content {
  float: left;
  width: 35%;
  height: 100%;
  background-color: #ffffff;
}

div#left-content {
  width: calc(100% - 35%);
  height: 100%;
  background-color: #00aeef;
  float: left;
}

Answer 3

我个人会使用display:inline-block来对齐左右div 并排并添加必要的宽度以添加父宽度的100％。请务必在父级上使用font-size:0来消除左右div之间的空白区域，以使它们彼此相邻。

请务必为左右内容指定字体大小，以便实际显示您的内容！

此方法在很大程度上向后兼容所有浏览器。

div#main-content{
    font-size:0;
}

div#left-content{
    display:inline-block;
    vertical-align:top;
    width:65%;
}

div#right-content{
    display:inline-block;
    vertical-align:top;
    width:35%;
}

如何正确定位div

3 个答案: