使用 CSS 和 html 构建网页 [关闭]答案

【问题标题】：Structuring a web page using CSS and html [closed]使用 CSS 和 html 构建网页 [关闭]
【发布时间】：2018-12-03 22:57:07
【问题描述】：

我想构建以下网页，同时将每个部分的文本和图像居中并保持网页响应。现在，我尝试了从 Flex 框到 Bootstrap 的行和列的所有方法，但要么是我的网页失去了响应能力，要么我无法将内容集中在我正在创建的扇区内。

在符合这两个条件的情况下，您会建议我如何进行下图所示的设计？

所需的网页结构

【问题讨论】：

欢迎来到 Stack Overflow！这个问题要么太宽泛，要么基于意见，要么需要讨论，因此对于 Stack Overflow 来说是题外话。如果您有具体的、可回答的编程问题，请提供完整的详细信息。
尝试使用 CSS 网格。这是最好的
@Paulie_D 我的简而言之，我的问题是如何划分响应式网页，同时允许内容居中等功能。如果你真的认为这个问题有很多答案，那么请与我分享。
@Akshay L 感谢您的回答，但恐怕我已经尝试过了，无法控制每个跨度内的内容位置和功能。

标签： html css web webpage

【解决方案1】：

要设计这样的东西，您需要将其分解为多个部分。

在这种情况下，我们可以有 LEFT SIDE、CENTER CONTENT、RIGHT SIDE。我将其分解为列，因为布局似乎是由这 3 个部分的宽度定义的。然后一旦我们拥有每个。把它拼凑起来。

nav {
  width: 100%;
}

nav:after {
  content: '';
  display: table;
  clear: both;
}

.side-body {
  padding: 5px;
}

.header {
  height: 100px;
  flex-shrink: 0;
  padding: 5px;
  background-color: #feeeee;
}

.header img {
  max-width: 100%;
  max-height: 100%;
}

a {
  float: left;
  display: block;
  padding: 5px;
  background: #eeeeee;
  width: 20%;
}

* {
  box-sizing: border-box;
}

.center-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.body {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background-color: #dddddd;
}

.layout {
 display: flex;
}

.left-layout {
  width: 200px;
  flex-shrink: 0;
}

.right-layout {
  width: 150px;
  flex-shrink: 0;
}

<div class="layout">
  <div class="left-layout">
    <div class="header">
      <img src="http://via.placeholder.com/200x100" />
    </div>
    <div class="side-body">
      <h2>List</h2>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <div class="center-layout">
    <div class="header">
      <h1>Title</h1>
    </div>
    <nav>
      <a>Home</a>
      <a>About</a>
      <a>Shop</a>
      <a>Contact</a>
      <a>Terms</a>
    </nav>
    <div class="body">
      <img src="https://via.placeholder.com/200x200" />
    </div>
  </div>
  <div class="right-layout">
    <div class="header">
      <h2>Info</h2>
    </div>
    <div class="side-body">
      <h2>List</h2>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>

Flexbox 让一切变得简单。希望对您有所帮助。

【讨论】：