如何只使用divs标签和CSS

Question

我对HTML和CSS很陌生，所以这可能是一个很容易回答的问题。

问题是： 如何只使用div和css？

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

Answer 1

以下是使用flexbox属性询问的基本设置。

  

CSS3 Flexible Box 或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>