CSS 显示内联块不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18216248/
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
Display inline-block not working
提问by praks5432
So I have html like this
所以我有这样的 html
<div class="search-form-wrapper">
</div>
<div class="results-view-wrapper">
</div>
<div class="quick-visualization-wrapper"/>
This is the CSS for them -
这是他们的 CSS -
.search-form-wrapper {
border-right: solid 1px #d1d2d4;
display: inline-block;
float: left;
height: 100%;
max-width: 350px;
min-height: 900px;
min-width: 300px;
position: relative;
width: 30%;
}
.results-view-wrapper {
display: inline-block;
height: 100%;
position: absolute;
padding-left: 10px;
}
.quick-visualization-wrapper {
display: inline-block;
}
The first two divs are displayed next to each other, but the last div appears behind the results-view-wrapper, (so next to the search-form-wrapper). I thought it might be because results-view-wrapper is position absolute, but when I took that out the div just moved downwards and was still behind results-view-wrapper.
前两个 div 彼此相邻显示，但最后一个 div 出现在 results-view-wrapper 后面（因此在 search-form-wrapper 旁边）。我认为这可能是因为 results-view-wrapper 是绝对位置，但是当我把它拿出来时，div 只是向下移动并且仍然落后于 results-view-wrapper。
How do I make it so that it appears next to the results-view wrapper?
如何使它出现在结果视图包装器旁边？
回答by chris-l
You are not specifying the width of the second and third divs. You need to do it.
您没有指定第二个和第三个 div 的宽度。你需要这样做。
Why you have position:absoluteon that div ? Also, don't use floaton an element with display:inline-block.
为什么你有position:absolute那个 div ？另外，不要float在带有display:inline-block.
回答by bmorgan21
Give this css a try. It has to do with your float and absolute position. Also the last div didn't have a width, so it was easily visible.
试试这个 css。它与您的浮动和绝对位置有关。此外，最后一个 div 没有宽度，因此很容易看到。
.search-form-wrapper {
border-right: solid 1px #d1d2d4;
display: inline-block;
height: 100%;
max-width: 350px;
min-height: 900px;
min-width: 300px;
position: relative;
width: 30%;
background-color:red;
}
.results-view-wrapper {
display: inline-block;
min-height: 900px;
height: 100%;
padding-left: 10px;
background-color:green;
}
.quick-visualization-wrapper {
display: inline-block;
background-color:black;
min-height: 900px;
height: 100%;
width:10px;
}
