下部と下部に表示される上部div

Question

My HTML構造体は最初に段落を表示し、その後に図形を表示します。 CSSを使用して、上部にグラフィックを、下部に段落を表示したい。パラグラフは動的なので高さは固定されません。私はこの問題の解決方法を理解できません。

この私のコード：

.centerDiv { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
} 
 

 
.topDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
    vertical-align: top; 
 
} 
 

 
.bottomDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
    vertical-align: top; 
 
}

<div class="centerDiv"> 
 
    <div> 
 
    <div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique 
 
     nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div> 
 
    <div class="bottomDiv">Graphic</div> 
 
    </div> 
 
</div>

Answer 1

グラフィックはあなたが達成することができます固定の高さを持っている場合は、その

は

.centerDiv { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
} 
 

 

 
/* added code */ 
 
.centerDiv>div { 
 
    position: relative; 
 
    padding-top: 100px; /* padding value equals to bottomDiv's height*/ 
 
} 
 
/*---------------*/ 
 

 
.topDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
} 
 

 
.bottomDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
    
 
    /* added code */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    /*---------*/ 
 
}

<div class="centerDiv"> 
 
    <div> 
 
    <div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique 
 
     nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div> 
 
    <div class="bottomDiv">Graphic</div> 
 
    </div> 
 
</div>

怒鳴るコードを参照してくださいポジショニング

を使用して

それとも、divの子供

の順序を逆flex-direction: column-reverse;を使用することができます。しかし、これは

.centerDiv { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
} 
 

 
.centerDiv>div { 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
} 
 

 
.topDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
} 
 

 
.bottomDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
}

<div class="centerDiv"> 
 
    <div> 
 
    <div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique 
 
     nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div> 
 
    <div class="bottomDiv">Graphic</div> 
 
    </div> 
 
</div>