2つのdivの中の1つのdivの中のテキストの下に

Question

私はいくつかのテキストを含むコンテンツdivと、隣り合わせに配置されたcontent divの中の2つのdivを持っています。

2つの子divが隣り合わせに表示されるようにしたいが、テキストの隣には表示されないようにする。

body { 
 
    text-align: center; 
 
} 
 
#first, #second { 
 
    border: solid green 2px; 
 
} 
 
#content { 
 
    border: solid purple 2px; 
 
    display: flex; 
 
    clear: both; 
 
} 
 
#second { 
 
    background-color: yellow; 
 
    padding-bottom: 500px; 
 
    width: 100px; 
 
    display: inline; 
 
    position: relative; 
 
} 
 
#first { 
 
    background-color: palegoldenrod; 
 
    padding-bottom: 500px; 
 
    width: 400px; 
 
    display: inline; 
 
    position: relative; 
 
}

<div id="content">div id="content" 
 
    <div id="second">div id="second"</div> 
 
    <div id="first">div id="first"</div> 
 
</div>

ここでそれが今ではどのように見えるかのJsfiddleです。

Answer 1

JSFiddle

#first, #second { 
    border: solid green 2px; 
} 
#content { 
    border: solid purple 2px; 
    clear: both; 
} 
#second { 
    background-color: yellow; 
    padding-bottom: 500px; 
    width: 100px; 
    position: relative; 
    float: right; 
} 
#first { 
    background-color: palegoldenrod; 
    padding-bottom: 500px; 
    width: 400px; 
    position: relative; 
    float: left; 
} 

#content::after { 
    content: ""; 
    clear: both; 
    display: block; 
} 

Demo

Answer 2

を更新参照してください私の最初のアイデアは、あなたの第2および第1のdivをラップし、列にコンテンツのdivにフレックス方向を変更することです。

#first, #second { 
 
    border: solid green 2px; 
 
} 
 
#content { 
 
    border: solid purple 2px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    clear: both; 
 
} 
 
#second { 
 
    background-color: yellow; 
 
    width: 100px; 
 
    display: inline; 
 
    position: relative; 
 
    flex: 1; 
 
} 
 
#first { 
 
    background-color: palegoldenrod; 
 
    width: 400px; 
 
    display: inline; 
 
    position: relative; 
 
    flex: 1; 
 
} 
 

 
.main_content { 
 
    display: flex; 
 
}

<div id="content"> 
 
div id="content" 
 
<div class="main_content" > 
 
    <div id="second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
 
    <div id="first">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
 
    </div> 
 
</div>

Answer 3

あなたはこのように、別のdiv内の両方のdivを置くことができます（私はそれの目的だったもの見当がつかないよう500pxなど私はあなたのパディングを削除しました。）：

<div id="content"> 
    div id="content" 
    <div id="twoboxes"> 
    <div id="second">div id="second"</div> 
    <div id="first">div id="first"</div> 
    </div> 
</div> 

とyous CSSでは、displayをflexに設定します。ここにCSSがあります：

#first, #second { 
    border: solid green 2px; 
} 
#content { 
    border: solid purple 2px; 
    display: block; 
    clear: both; 
} 
#twoboxes{ 
    display: flex; 
} 
#second { 
    background-color: yellow; 
    padding-bottom: 500px; 
    width: 100px; 
    display: inline; 
    position: relative; 
} 
#first { 
    background-color: palegoldenrod; 
    padding-bottom: 500px; 
    width: 400px; 
    display: inline; 
    position: relative; 
}