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

标签 html css twitter-bootstrap

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 6 年前

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

我能想到的一些方法是表格(但我听说这不是一个好的做法)、Bootstrap 网格系统(我尝试使用它,但它似乎并没有给你太多灵 active )和.. .我以前这样做的方式(也许是最不合适的一种),使用 CSS 位置(绝对)属性在内容旁边硬编码两个 div 标签。

这几天听说我可以使用 display: flex 属性。这是一个好的解决方案吗?

最佳答案

是的,只要您不需要支持旧浏览器,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 - 使用 HTML 和 CSS 构建侧边栏区域的好方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42013649/

上一篇:PHP逻辑检查调整CSS类失败

下一篇:css - 背景图像在 IE 中不显示,我不知道为什么

相关文章:

html - Bootstrap 中的垂直导航

html - 尝试为选择选项菜单提供字体系列

javascript - 动态创建一个具有动态onclick功能的div

jQuery 如果一个元素有类则执行

html - 两个加div,a,h2,css hover

html - 如何在 HTML 中使表中的 <tr> 透明?

html - 显示缩略图并排显示而不是在 MYSQL/PHP 下方

html - 将不透明度应用于背景图像而不是文本

jquery - Bootstrap 全宽 slider 问题

javascript - 如何在选择下拉菜单时动态创建文本框