本部は、テキスト

.row { 
 
     display: flex; 
 
    } 
 
    
 
    .col { 
 
     flex: 1; 
 
    } 
 
    
 
    .container { 
 
     display: flex; 
 
     align-items: center; 
 
     background-color: blue; 
 
     font-size: 12px; 
 
     color: #87909A; 
 
     width: 275px; 
 
     margin-top: 20px; 
 
     margin-left: 20px; 
 
     height: 70px; 
 
    } 
 
    
 
    .textview { 
 
     height: 50px; 
 
     line-height: 35px; 
 
     padding-left: 13px; 
 
     position: relative; 
 
     border-bottom: 1px solid #CFD4D9; 
 
     background-color: #FFF; 
 
     color: #5C6570; 
 
     padding-right: 13px; 
 
     margin-left: 20px; 
 
     vertical-align: middle; 
 
     display: inline-block; 
 
    } 
 
    
 
    .middle { 
 
     vertical-align: middle; 
 
    }

<!DOCTYPE html> 
 
    <html lang="en"> 
 
     <head> 
 
      <meta charset="utf-8"> 
 
      <link rel="stylesheet" href="event.css"> 
 
     </head> 
 
    
 
     <body> 
 
      <div class="row"> 
 
       <div class=".col"> 
 
        <img src="map.png" style="height: 300px; width: 300px; margin-top: 20px;"> 
 
       </div> 
 
       <div class=".col"> 
 
        <div class="container"> 
 
         <div class="textview"> 
 
          <span class="middle">Some text</span> 
 
         </div> 
 
         <div class="textview"> 
 
          <span class="middle">Some text</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </body> 
 
    </html>

私はこのようなビューを作成したいが、私は上記のようなものを持っていると拡大されていませんか？誰かが、私が白いコンテナビューを青い背景の中央に配置する方法と、白いコンテナビュー内にテキストを中央に配置する方法を教えてもらえますか？

また、以下のレイアウトを実現する正しい方法であれば、一般的なフィードバックをいただけますか？私は地図が70％で、右側が30％を占める横並びのビューを作成したいと思います。

出典

2017-07-25 CapturedTree

'クラス=」。 col "はおそらくタイプミスで、' class = "col" ''でなければなりません。 – fen1x

2つの白いボックスが青い背景の内側に水平に配置されますか？あなたは既に白いボックスの中にテキストを中心に置いているように見えます。 – duyn9uyen

更新された回答を確認私は理解するためにいくつかの説明を追加しました。 – LKG

だけで以下のCSSの変更を追加して、HTMLでcolクラスから.を削除します。

あなたはマップがcol-1とcol-2のように二つの別々のdivsを使用し、それらに.col-1 {flex:1 0 70%;}とcol-2 {flex:1 0 30%;}を割り当て、その後70%を占有することを必要とする場合、私はよりよく理解するためにフィドルを追加しました。

Fiddle link

.container { 
     display: flex; 
     align-items: center; 
     justify-content:center; /* Added */ 
     background-color: blue; 
     font-size: 12px; 
     color: #87909A; 
     width: 275px; 
     margin-top: 20px; 
     margin-left: 20px; 
     height: 70px; 
    } 

    .textview { 
     height: 50px; 
     line-height: 35px; 
     padding-left: 13px; 
     position: relative; 
     border-bottom: 1px solid #CFD4D9; 
     background-color: #FFF; 
     color: #5C6570; 
     padding-right: 13px; 
     margin-left: 20px; 
     vertical-align: middle; 
     display: inline-flex; /* Added */ 
     justify-content:center; /* Added */ 
     align-items:center; /* Added */ 
    }

.row { 
 
    display: flex; 
 
} 
 

 
.col { 
 
    flex: 1; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background-color: blue; 
 
    font-size: 12px; 
 
    color: #87909A; 
 
    width: 275px; 
 
    margin-top: 20px; 
 
    margin-left: 20px; 
 
    height: 70px; 
 
} 
 

 
.textview { 
 
    height: 50px; 
 
    line-height: 35px; 
 
    padding-left: 13px; 
 
    position: relative; 
 
    border-bottom: 1px solid #CFD4D9; 
 
    background-color: #FFF; 
 
    color: #5C6570; 
 
    padding-right: 13px; 
 
    margin-left: 20px; 
 
    vertical-align: middle; 
 
    display: inline-flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.middle { 
 
    vertical-align: middle; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <img src="map.png" style="height: 300px; width: 300px; margin-top: 20px;"> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="container"> 
 
     <div class="textview"> 
 
     <span class="middle">Some text</span> 
 
     </div> 
 
     <div class="textview"> 
 
     <span class="middle">Some text</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-07-25 17:34:44 LKG

これを試してみてください：

<style> 
body, .container{ 
    margin:0px; 
    padding:0px; 
    } 
.col-1{ width:70%; 
     float:left; 
     } 
.col-2{ width:30%; 
     float:left; 
     }

上記のコードが機能しない場合。幅を68％-30％または65％-30％に調整してください

出典

2017-07-25 17:43:06

textviewクラスの2つのdivを親divに配置してください。親がmargin:auto

<div class="parent" style="margin: auto;"> 
     <div class="textview"> 
      <span class="middle">Some text</span> 
     </div> 
     <div class="textview"> 
      <span class="middle">Some text</span> 
     </div> 
</div>

CSS

.parent { 
margin:auto; 
}

出典

2017-07-25 17:49:42 duyn9uyen

をDIV与えるその後のすべてが、ブートストラップを使用して簡単です。その後、

輸入あなたの頭にブートストラップおよびCSS

<head> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css"> 
    <style type="text/css"> 
     .items{ 
      height: 60px;background-color: white; 
      margin-top: 30px; 
     } 
     .col1{ 
      height: 400px; 
      background-color: blue; 
     } 
     .col2{ 
      height: 400px; 
      background-color: red; 
     } 
    </style> 
</head>

簡単にブートストラップ・グリッド洙について

<div class="container"> 
    <div class="row"> 
     <div class="col-md-7 col1"> 
      <p>Text</p> 
     </div> 

     <div class="col-md-4 col2" > 
      <div class="items"> 
       <p>tex text text</p> 
      </div> 
      <div class="items"> 
       <p>tex text text</p> 
      </div> 
      <div class="items"> 
      <p>tex text text</p> 
      </div> 
     </div> 
    </div> 
</div>

を読んでみてください、あなたがそれ ![enter image description here する方法になります] 1

出典

2017-07-25 17:53:50

本部は、テキスト

答えて

関連する問題