css - 显示内联 block 不起作用

标签 css

所以我有这样的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。

如何让它出现在结果 View 包装器旁边？

最佳答案

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

为什么你在那个 div 上有 position:absolute ？另外，不要在带有 display:inline-block 的元素上使用 float。

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

关于css - 显示内联 block 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18216248/