Question

测试页面：http://vintageamericanpottery.com/3test.html

这应该非常简单，但我无法const addCategoryEpic = action$ => { return action$.ofType(ADD_CATEGORY_REQUEST) .switchMap((action) => { const db = firebase.firestore() const user = firebase.auth().currentUser const response = db.collection('categories') .doc() .set({ name: action.payload.name, uid: user.uid }) return Observable.from(response) .mergeMap(() => Observable.of( { type: ADD_CATEGORY_SUCCESS }, { type: GET_CATEGORIES_REQUEST } )) .catch(err => Observable.of( { type: ADD_CATEGORY_ERROR, payload: err } )) }) }在<div class="welcome"></div>之上堆叠。我认为这是因为它们都在一个flex容器中，但是必须有一种方法可以让divs在这个容器中叠加在一起。

我已尝试添加<div class="header"></div>，display: block和flex-direction: column，但它并未阻止元素显示内联。

＆＃13;

clear: both

＆＃13;

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 20px 0px 0px 0px;
  padding-left: 4%;
  padding-right: 4%;
  padding-top: 1%;
  max-width: 1200px;
}

.welcome {
  display: flex;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-align: left;
  color: #5A5A5A;
  flex-direction: column!important;
  flex-wrap: no-wrap;
}

＆＃13;

我可以不在此容器中放入任何其他内容并将其简单地堆叠吗？我想在这个容器的顶部堆叠两个div，但无论我做什么，它们都会保持内联。

Answer 1

这是因为.container还有 display: flex。

.welcome }

.header

如何在弹性框中将项目堆叠在一起

1 个答案: