问题

Question

问题

我想创建一个3个容器，一个是将占据屏幕大部分内容的主要大容器，而另一个则几乎被放置为左侧和底部的快捷键。类似于this。

我尝试过的事情

我已经尝试了离子栅，但似乎不适用于响应式布局，而且我认为也许有更好的方法可以呢？

Answer 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/

离子响应式多容器网格布局

问题

我尝试过的事情

1 个答案: