相关疑难解决方法(0)

如何在Flexbox中禁用相等高度的列?

我有三个元素,我试图在我的布局中对齐.

首先,我有一个div反馈,然后是搜索输入,然后是div元素的建议.

我希望第一个和最后一个元素的宽度为20%,搜索输入的宽度为60%.使用Flexbox我实现了我想要的.

但是有一个功能可以将所有div增加到最高元素.这意味着当弹出搜索结果时,反馈和建议元素的高度会随着搜索div的增加而产生混乱的布局.

有没有一个技巧不增长具有最高元素的div?只是使div(#feedback#suggestions)具有内容的高度?

#container_add_movies {
  display: flex;
}
#container_add_movies #feedback {
  width: 20%;
  background-color: green;
}
#container_add_movies #search {
  width: 60%;
  background-color: red;
}
#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}
Run Code Online (Sandbox Code Playgroud)
<div id='container_add_movies'>
  <div id='feedback'>
    Feedback
  </div>
  <div id='search'>
    Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>
  </div>
  <div id='suggestions'>
    Suggestions
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

http://codepen.io/alucardu/pen/PPjRzY

html css css3 flexbox

49
推荐指数
2
解决办法
3万
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1