divを位置の相対的な水平方向に整列する

Question

div内に3つのdivがあり、これらの3つのdivが水平に整列するようにします。私は絶対的なポジションを与えることでこれを行うことができましたが、私は彼らに相対的なポジションを持たせたいと思います。なぜ私はそれが相対的な位置を持ってほしいですか、私がズームアウトまたはズームインすると、divのサイズは変更されませんが、これらのdiv内の要素が変更されます。私はdivをズームイン/インすることも欲しい。そういうわけで私は彼らに相対的な立場を持たせたいのです。今、私のdiv要素が水平方向に整列されていない

.body_clr { 
 
    background-color: #eceff1; 
 
    position: fixed; 
 
    overflow-y: scroll; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.test_div { 
 
    width: 20em; 
 
    height: 20em; 
 
    margin-left: 2em; 
 
    margin-top: 20%; 
 
    position: relative; 
 
    background-color: #f5f5f5; 
 
    display: inline-block; 
 
    float: left; 
 
    z-index: 1; 
 
} 
 
.ff { 
 
    width: 40em; 
 
    height: 100%; 
 
    padding-top: 10%; 
 
    position: relative; 
 
    background-color: #2aabd2; 
 
    float: left; 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
    display: inline-block; 
 
} 
 
.overview { 
 
    width: 20em; 
 
    height: 35%; 
 
    background-color: black; 
 
    margin-top: 20%; 
 
    float: left; 
 
    margin-right: 5%; 
 
    position: relative; 
 
    display: inline-block; 
 
    z-index: 1; 
 
}

<div className="body_clr"> 
 

 
    <div className="test_div"></div> 
 
    <div className="ff"></div> 
 
    <div className="overview"></div> 
 

 
</div>

。

Answer 1

これにはフレックスボックスを使用します。私が作ったこの例を見てください：https://jsfiddle.net/cfLfLnLx/。

また、ではなく、classを使用して、HTML要素のクラスを指定します。

flexboxを使用してより広範なガイド： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

あなたのCSSのいくつかのミスを持っている：

1. あなたはディスプレイを使用することはできません。フロートとインラインブロック：左（あなたが持っていますfloat：leftまたはdisplay：inline-blockを使用する）

2. float：leftを使用する場合は、2つのfloat div（常に）の後にクリアを置く必要があります。

私は、テーブルのセルにフロートで

* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 
 
.body_clr { width: 100%; height: 100%; display: table; } 
 

 

 

 
.col1 { height: 100%; display: table-cell; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 
 

 
.ff { width: 100%; height: 40px; display: block; background: #000;} 
 
.test_div { width: 100%; height: 40px; display: block; background: red;} 
 
.overview { width: 100%; height: 40px; display: block; background: blue;}

<div class="body_clr"> 
 

 
    <div class=" col1"> 
 
    <div class="test_div"></div> 
 
    </div> 
 
    <div class="col1"> 
 
    <div class="ff"></div> 
 
    </div> 
 
    <div class="col1"> 
 
    <div class="overview"></div> 
 
    </div> 
 

 
</div>

を解決：

.body_clr { width: 100%; height: 100%; display: block; } 
 

 
.clear { width: 0; height: 0; padding: 0; margin: 0; display: block; visibility: hidden; overflow: hidden; font-size: 0; line-height: 0; clear: both; } 
 

 
.col1 { width: 33.33%; height: 100%; display: block; float: left; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 
 

 
.ff { width: 100%; height: 40px; display: block; background: #000;} 
 
.test_div { width: 100%; height: 40px; display: block; background: red;} 
 
.overview { width: 100%; height: 40px; display: block; background: blue;}

<div class="body_clr"> 
 

 
    <div class=" col1"> 
 
    <div class="test_div"></div> 
 
    </div> 
 
    <div class="col1"> 
 
    <div class="ff"></div> 
 
    </div> 
 
    <div class="col1"> 
 
    <div class="overview"></div> 
 
    </div> 
 
    
 
    <div class="clear"></div> 
 

 
</div>