css - 显示内联块不起作用

Question

所以我有这样的html

    <div class="search-form-wrapper">
</div>
<div class="results-view-wrapper">
</div>
<div class="quick-visualization-wrapper"/>

这是他们的 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;
    }

前两个 div 彼此相邻显示，但最后一个 div 出现在 results-view-wrapper 之后（因此在 search-form-wrapper 旁边）。我认为这可能是因为 results-view-wrapper 是绝对位置，但是当我把它拿出来时，div 只是向下移动并且仍然在 results-view-wrapper 后面。

如何使它显示在结果视图包装器旁边？

Answer 1

您没有指定第二个和第三个 div 的宽度。你需要这样做。

为什么你有position:absolute那个 div ？另外，不要float在带有display:inline-block.

http://plnkr.co/edit/6wLokBiZUw33SKmZtjiC?p=preview

Answer 2

试试这个 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;
    }