divsタグとCSSのみを使用する方法

Question

私はHTMLとCSSを新しくしているので、おそらくこれは簡単に答えることができます。

質問は divsとcssだけを使用してこれを行うには？

私は<table> <tr> <th> <td>....

Answer 1

を使用したくないここでは、flexboxプロパティを使用して求めているものの基本的な設定です。

CSS3フレキシブルボックス、またはflexboxは、ページレイアウトが異なる画面 サイズと異なる表示に対応しなければならないときに要素が予想 に動作するように、ページ上の要素の 配置を提供するレイアウトモードでありますデバイス。多くのアプリケーションでは、 フレキシブルボックスモデルでは、 のブロックモデルに比べて浮動小数点数を使用していないし、フレックスコンテナの余白も内容の余白で崩壊することはありません。

at MDNについて詳しくは、こちらをご覧ください。それを使って快適に感じられます。セットアップはピクセル完璧ではないかもしれませんが、それはあなたに望ましいレイアウトの良いスタートを与えます。試行錯誤は、学習する最善の方法です。スタックオーバーフローへ

div { 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    min-height: 20px; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-flow: row-wrap; 
 
    width: 100%; 
 
} 
 

 
.column { 
 
    flex: 1 1 100%; 
 
} 
 

 
.middle { 
 
    flex-basis: 200%; 
 
} 
 

 
.middle-top, 
 
.right-top, 
 
.right-bottom { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    width: 100%; 
 
} 
 

 
.language, 
 
.search, 
 
.login, 
 
.signup, 
 
.some-text, 
 
.avatar { 
 
    flex: 1 1 50%; 
 
}

<div class="container"> 
 

 
    <div class="column left"> 
 
    <div class="social"> 
 
     Social icons 
 
    </div> 
 
    <div class="logo"> 
 
     Logo 
 
    </div> 
 
    </div> 
 
    <div class="column middle"> 
 
    <div class="middle-top"> 
 
     <div class="language"> 
 
     Language 
 
     </div> 
 
     <div class="search"> 
 
     Search 
 
     </div> 
 
    </div> 
 
    <div class="slogan"> 
 
     Slogan 
 
    </div> 
 
    <div class="menu"> 
 
     Menu 
 
    </div> 
 
    </div> 
 
    <div class="column right"> 
 
    <div class="right-top"> 
 
     <div class="login"> 
 
     Login 
 
     </div> 
 
     <div class="signup"> 
 
     Signup 
 
     </div> 
 
    </div> 
 
    <div class="right-middle"> 
 
     Welcome guest 
 
    </div> 
 
    <div class="right-bottom"> 
 
     <div class="some-text"> 
 
     <div class="something"> 
 
      Some text 
 
     </div> 
 
     <div class="something"> 
 
      Some text 
 
     </div> 
 
     </div> 
 
     <div class="avatar"> 
 
     Avatar 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>