html - 如何只使用 div 标签和 css

Question

我对 HTML 和 CSS 还很陌生，所以也许这是一个非常容易回答的问题。

问题是: 如何仅使用 div 和 css 来做到这一点？

我不想使用 <table> <tr> <th> <td>....

Answer 1

这是使用 flexbox 属性的基本设置。

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

阅读更多相关信息 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>