Question

如果您想要一个内容区域和旁边的两个侧边栏，那么构建网页的好方法是什么。一个左，一个右。这种布局的好例子是Twitter和Quora。

我能想到的一些方法是表格（但我听说这不是一个好的做法），Bootstrap网格系统（我试图搞砸了，但它似乎没有给你很大的灵活性）和..我之前做过这种方式（也许是最不合适的方式），使用CSS位置（绝对）属性在内容旁边硬编码两个div标签。

这些天我听说我可以使用display：flex属性。这是一个很好的解决方案吗？

Answer 1

以下是使用flex的基本示例：

#container{
  display: flex;
}
#container div{
  flex-grow: 1;
  background-color: red;
  text-align:center;
}
.sidebar{
  max-width:150px;
  background-color: yellow !important;
}

<div id="container">
  <div class="sidebar">
    Side Bar Left
  </div>
  <div>
    Main Content
  </div>
  <div class="sidebar">
    Side Bar Right
  </div>
</div>

- 迈克尔

Answer 2

是的，只要你不需要支持旧的浏览器，flexbox就是最好的。

这是一个基本示例，但我建议您开始对HTML和CSS进行更多研究

.wrap {
  display: flex;
  height: 400px;
}

.sidebar {
  background: #ddd;
  width: 200px;
  padding: 1em;
}

.content {
  background: #f5f5f5;
  padding: 1em;
  flex: 1;
}

<div class="wrap">

  <div class="sidebar">Sidebar</div>
  
  <div class="content">Content</div>
  
</div>

使用HTML和CSS构建侧边栏区域的好方法

2 个答案: