4つのサブ部門を持つヘッド部門

Question

グッドモーニング開発者、

私はフロントエンド開発の新人です。私は次の問題を抱えています：

私は頭の中に4つの下位のdivで頭のdivを持っていたいです。画面に合わせてどうすればいいですか？ （スケッチを参照）

種類がみなしここ

Answer 1

：

は（国境を除いて）...どんなスタイルなしFiddle Demo

.container { 
 
    border: 3px solid; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.custom_box { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.custom_box1 { 
 
    border: 3px solid; 
 
    float: left; 
 
    margin: 2%; 
 
    text-align: center; 
 
    width: 35%; 
 
} 
 
.custom_box2 { 
 
    border: 3px solid; 
 
    float: left; 
 
    margin: 2%; 
 
    text-align: center; 
 
    width: 55%; 
 
}

<div class="container"> 
 
<div class="custom_box"> 
 
    <div class="custom_box1"> 
 
    <h1>1</h1> 
 
    </div> 
 
    <div class="custom_box2"> 
 
    <h1>2</h1> 
 
    </div> 
 
</div> 
 
<div class="custom_box"> 
 
    <div class="custom_box1"> 
 
    <h1>1</h1> 
 
    </div> 
 
    <div class="custom_box2"> 
 
    <h1>2</h1> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

はフィドルです：https://jsfiddle.net/9Lum94me/

CSS floats、flexboxとあなたが探索することができtable-cellと同様に他の方法があります。

HTML：

<div class="container"> 

    <div class="row"> 
    <div class="column">Column 1</div> 
    <div class="column">Column 2</div> 
    </div> 
    <div class="row"> 
    <div class="column">Column 3</div> 
    <div class="column">Column 4</div> 
    </div> 

</div> 

CSS：

.container{ 
    border: 1px solid gray; 
} 
.row{ 
    padding: 10px; 
} 
.row .column{ 
    display: inline-block; 
    min-width: 45%; min-height: 150px; border: 1px solid gray; margin: 0 4% 0 0; 
} 

EDIT： あなたはニーズごとに列の幅を管理する必要があります。私はあなたがチェックしてくださいこれが必要だと思う

Answer 3

ブートストラップ応答の例を参照してください。応答性をテストする

フィドルexample

.content{ 
 
    border:2px solid green; 
 
    height:100px; 
 
    width:92%; 
 
    margin:20px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row" style="border:1px solid blue;"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12"> 
 
    
 
    <div class="row no-gutter-2"> 
 
     <div class="col-lg-6 col-md-6 col-sm-6"> 
 
      <div class="content">Header1</div> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-6"> 
 
      <div class="content">Header2</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-lg-6 col-md-6 col-sm-6"> 
 
      <div class="content">Header3</div> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 col-sm-6"> 
 
      <div class="content">Header4</div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

、再サイズPLZブラウザウィンドウ。 上記の例は、小規模、中規模および大規模で応答します。 スニペットをフルページで実行してください。