小编Ama*_*nda的帖子

Flex 订单属性未按预期工作

我试图得到“通心粉和奶酪真的很好吃!” 在“网站的主要内容”下方。

#content {
  padding: 0;
  background: 0;
  float: none;
  width: auto;
}
.heading {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}
#content h1 {
  text-align: left;
  width: 100%;
  float: none;
  margin: 0 0 10px;
  font: 2.538em/1.3em;
  color: #393939;
}
#content .text {
  order: 1;
}
Run Code Online (Sandbox Code Playgroud)
<div id="content">
  <div class="heading">
    <h1>Mac and Cheese</h1>
    <div class="text">
      <p>Mac and cheese is really yum!</p>
    </div>
  </div>
  <div class="main-content">
    The main content of the site</div>
</div>
Run Code Online (Sandbox Code Playgroud)

http://codepen.io/anon/pen/KMPydJ

任何帮助表示赞赏 - 谢谢!

html css flexbox

1
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

flexbox ×1

html ×1