如何使用 inline-block 并排制作两个 div？答案

【问题标题】：How to make two divs side by side using inline-block?如何使用 inline-block 并排制作两个 div？
【发布时间】：2013-12-26 23:14:09
【问题描述】：

如何让 div 并排排列，其中一个 div ('contentwrapper') 可以响应浏览器的大小调整。

HMTL

<div id="maincontainer">
<div id="leftcolumn">&nbsp;</div>

<div id="contentwrapper">&nbsp;</div>
</div>

CSS

#maincontainer {
    width:100%;
    height: 100%;
}

#leftcolumn {
    display:inline-block;
    width: 100px;
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    width:100%;
    height: 100%;
    background-color: red;
}

JSFIDDLE http://jsfiddle.net/A5HM7/

【问题讨论】：

@BuddhistBeast 与浏览器同一行

标签： html css

【解决方案1】：

<style>
  #maincontainer {
    width:100%;
    height: 100%;
  }

  #leftcolumn {
    float:left;
    display:inline-block;
    width: 100px;
    height: 100%;
    background: blue;
  }

  #contentwrapper {
    float:left;
    display:inline-block;
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    height: 100%;
    background-color: red;
  }
</style>

【讨论】：

【解决方案2】：

好的，所以我认为这对您来说是最快的解决方法。您已经有了一个很棒的 html 结构，但我将为您缩小范围。这是JsFiddle。

使用您的代码：

#maincontainer {
    width:100%;
    height: 100%;
}

我做了这样的小调整：

#maincontainer {
    width:100%;
    height: 100%;
    display:inline-block;//added this
}

然后我还像这样重组了另外两件事：

#leftcolumn {
    float:left;//added this
    width: 100px;
    height:100%;
    background: blue;
}
#contentwrapper {
    float:right;//added this
    width:100%;
    height: 100%;
    background-color: red;
}

现在在这个 JsFiddle 中，我已经适当地创建了一个特定的宽度，因此您可以随时更改它。请记住，如果您使用 100% 作为宽度，并尝试在同一行粘贴其他内容，它会自动创建两条线，如下所示：

#leftcolumn {
    display:inline-block;<-- changed this above.
    width: 100px;<----This won't work with the below
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;<---- changed this above.
    width:100%;<---- This won't work with the above
    height: 100%;
    background-color: red;
}

但如果你将其重组为更像这样：

#leftcolumn {
    display:inline-block;
    width: 10%;<---This will work with the below
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    width:90%;<---This will work with the above.
    height: 100%;
    background-color: red;
}

有几点需要注意，我确实使用 JsFiddle 添加了高度，以便我可以看到实际尺寸，并且出于确切原因我还添加了宽度。需要注意的是可以真正帮助实现，基本的“为什么这样做”是this。

如果有什么不适合你的，请在下方评论:)

【讨论】：

【解决方案3】：

也可以在不使用浮点或绝对定位的情况下让 2 个 div 彼此相邻。我正在使用 IE9 及更高版本支持的 calc 函数。 MDN calc specs 并且不要忘记空间拦截器Stackoverflow: 50% wont fit because hidden space between divs

<!-- HMTL -->
<div id="maincontainer">
<div id="leftcolumn">&nbsp;</div><!-- space blocker
--><div id="contentwrapper">&nbsp;</div>
</div>

CSS

#maincontainer {
  width:100%;
  height: 100%;
}

#leftcolumn {
  display:inline-block;
  width: 100px;
  height: 100%;
  background: blue;
}

#contentwrapper {
  display:inline-block;
  width: calc(100% - 100px);
  height: 100%;
  background-color: red;
}

【讨论】：

【解决方案4】：

有多种可能性，但最简单的是使用 flexbox。有关详细信息，请参阅灵活框布局模块的文档。请注意，它仍然是候选推荐，因此某些浏览器可能会遇到问题。

【讨论】：

【解决方案5】：

#maincontainer {
    width:100%;
    height: 100%;
}

#leftcolumn {
    display:inline-block;
    position: absolute;
    width: 340px;
    float: left;
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    margin-left: 340px;  // see how this is equal to the width of #left-column
    position: absolute; // might want to try with this or position relative
    max-width: 100%;
    width: 100%; // might want to try with or without this line
    height: 100%;
    background-color: red;
}

【讨论】：