0

だから私はこのような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;
    }

最初の 2 つの div は隣り合って表示されますが、最後の div は results-view-wrapper の後ろ (つまり、search-form-wrapper の隣) に表示されます。results-view-wrapper が絶対的な位置にあるためではないかと思いましたが、それを取り出したとき、div は下に移動しただけで、まだ results-view-wrapper の背後にありました。

結果ビュー ラッパーの横に表示されるようにするにはどうすればよいですか?

4

2 に答える 2

0

この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;
    }
于 2013-08-13T18:20:40.760 に答える