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。

如何使它出现在results-view wrapper旁边？

Answer 1

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

为什么你在那个div上有position:absolute？另外，请勿对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;
    }

显示内联块不起作用

2 个答案: