1

问题

我想创建一个 3 个容器，一个是主要的大容器，它将占据大部分屏幕，其他的几乎定位为左侧和底部的快捷栏。像这样的东西。

我试过的

我已经尝试过离子网格，但它似乎不适用于响应式布局，因为我认为也许有更好的方法来做到这一点？

4

1 回答 1

1

您可以在这些情况下使用 flexbox，它是一组原生 css 命令。

在此处阅读有关它的更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

这是一个像图像这样的布局的快速示例，您可以对其进行调整以满足您的目的，并使用您对 flexbox 的研究来扩展它。

html

<div id="main-wrapper">
  <div id="side-bar"></div>
  <div id="other-content">
    <div id="main-content"></div>
    <div id="footer"></div>
  </div>
</div>

css

#main-wrapper {
  width: 100%;
  height: 300px;
  display: flex;  
  align-items: stretch;
  background-color: grey;
  padding: 10px;
  box-sizing: border-box;
}

#side-bar{
  background-color: blue;
  width: 90px;
}

#other-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-left: 10px;
}

#main-content {
  flex: 1;
  background-color: blue;
  margin-bottom: 10px;
}

#footer {
  height: 90px;
  background-color: blue;
}

这是一个让你开始的小提琴。

https://jsfiddle.net/7wj31ucb/69/

于 2018-08-14T13:40:14.937 回答