Html 如何使用内联块并排制作两个div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20792501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make two divs side by side using inline-block?
提问by user2133606
How can I make the divs side by side and one of the div ('contentwrapper') be responsive to the browser resizing.
如何使 div 并排并且其中一个 div（'contentwrapper'）响应浏览器调整大小。
HMTL
HMTL
<div id="maincontainer">
<div id="leftcolumn"> </div>
<div id="contentwrapper"> </div>
</div>
CSS
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/
JSFIDDLE http://jsfiddle.net/A5HM7/
回答by Asraful Haque
<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>
回答by BuddhistBeast
Ok, so I think this will be the quickest fix for you. You already have a great html structure but I am going to narrow it down more for you. Here is the JsFiddle.
好的，所以我认为这对您来说是最快的解决方法。你已经有一个很棒的 html 结构，但我会为你缩小它的范围。这是JsFiddle。
With your code:
使用您的代码：
#maincontainer {
width:100%;
height: 100%;
}
I have made a minor adjustment like so:
我做了一个小的调整，如下所示：
#maincontainer {
width:100%;
height: 100%;
display:inline-block;//added this
}
and then I also restructured two other things like so:
然后我还重组了另外两件事，如下所示：
#leftcolumn {
float:left;//added this
width: 100px;
height:100%;
background: blue;
}
#contentwrapper {
float:right;//added this
width:100%;
height: 100%;
background-color: red;
}
Now in this JsFiddle, I have appropriately created a specific width, so you can always change that. Please keep in mind that if you use 100% as a width, and try to stick something else in that same line, it will automatically create two lines such like so:
现在在这个 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;
}
But if you restructure that to be more like this:
但是，如果您将其重组为更像这样：
#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;
}
A few things to note, I did add in a height with the JsFiddle so that I could see the actual dimensions and I also added in width for the exact reason. Something to note that can really help out with implementations and the basic "why does this work" is this.
需要注意的几件事，我确实使用 JsFiddle 添加了高度，以便我可以看到实际尺寸，并且出于确切原因我还添加了宽度。需要注意的事情真的可以帮助实现，基本的“为什么这样做”是这个.
Comment below if something doesn't work for you :)
如果有什么不适合你，请在下面发表评论:)
回答by Jeroen
It's also possible to get 2 div's beside each other without using float's or absolute positioning. I'm using the calc function which is supported in IE9 and above. MDN calc specsAnd don't forget the space blocker Stackoverflow: 50% wont fit because hidden space between divs
也可以在不使用浮动或绝对定位的情况下将 2 个 div 并排放置。我正在使用 IE9 及更高版本支持的 calc 函数。 MDN calc specs不要忘记空间阻塞器Stackoverflow：50% 不适合，因为 div 之间的隐藏空间
<!-- HMTL -->
<div id="maincontainer">
<div id="leftcolumn"> </div><!-- space blocker
--><div id="contentwrapper"> </div>
</div>
CSS
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;
}
回答by Rik Schaaf
there are multiple possibilities, but the easiest is using flexbox. See the documentation of the flexible box layout module for more info. Note that it is still a candidate recommendation, so some browsers could have problems with it.
有多种可能性，但最简单的是使用 flexbox。有关更多信息，请参阅弹性盒布局模块的文档。请注意，它仍然是候选推荐，因此某些浏览器可能会遇到问题。
回答by CRABOLO
#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;
}
