如何只使用的DIV標籤和CSS

Question

我是相當新的HTML和CSS所以也許這是一個瘋狂的容易回答的問題。

的問題是： 如何做到這一點只使用的div和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>