パネルの高さCSS

Question

私はこの問題があります。私は2つの部門を横に並べていますが、最初のパネルが最初であり、コンテナの高さが2番目のパネルからうまくいかない。私はひどく書くことを知っているが、私は良く分からない。ご協力ありがとうございます。

#container { 
    font-family: "Roboto", sans-serif; 
    width: 1000px; 
    border-radius: 1px; 
    position: relative; 
    z-index: 1; 
    background: #FFFFFF; 
    padding: 5px; 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
    margin-top : 50px; 

} 

#narrow { 
    position: relative; 
    width: 200px; //may be variable h  
} 

#wide { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-top: 220px; 
    margin-left: -150px; // half the width 
    width: 300px; // must be fixed 
} 

PHOTO WEBSITE

Answer 1

あなたは多くのオプションを持っていますが、ここではそれらの2のとおりです。
オプション

.row { 
 
    display: flex; /* equal height of the children */ 
 
} 
 

 
.col { 
 
    flex: 1; /* additionally, equal width */  
 
    padding: 1em; 
 
    border: solid; 
 
}

<div class="row"> 
 
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div> 
 
</div>

オプション

.container { 
 
    overflow: hidden; 
 
} 
 
.column { 
 
    float: left; 
 
    margin: 20px; 
 
    background-color: black; 
 
    padding-bottom: 100%; 
 
    color: white; 
 
    margin-bottom: -100%; 
 
}

<div class="container"> 
 

 
    <div class="column"> 
 
     Some content!<br> 
 
     Some content!<br> 
 
     Some content!<br> 
 
     Some content!<br> 
 
     Some content!<br> 
 
    </div> 
 

 
    <div class="column"> 
 
     Little content 
 
    </div> 
 

 
</div>

Answer 2

は、私はあなたが例えばのように、2つの子供のdivタグのための十分なスペースと親のdiv内の両方のボックスを置くべきだと思う：550px。次に、両方の子にfloat left属性を追加します。子供に絶対位置属性を使用しないでください。そうしないと動作しません。

それぞれの子divには、240 pxの幅を与え、2番目の子divには左側に10 pxの余白を付けます（それらを区切るには）。同じ属性を共有することが重要です。コード内

同じ説明：

.parentDiv { 
width: 550px; 
} 

.childRight { 
float: left; 
width: 240px;  
} 

.childLeft { 
float: left; 
width: 240px; 
}