相关疑难解决方法(0)

如你所见,list-items第一个row有相同的height.但是第二个项目row有所不同heights.我希望所有物品都有制服height.

有没有办法实现这一点,而不给出固定高度,只使用flexbox？

这是我的 code

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing …

我在创建一个flexbox响应网格时遇到了问题,并希望有人可以指出我正确的方向.

我希望所有的.blockdiv都是相同的高度,并且.bottomdiv绝对位于底部.这实际上是在当前的解决方案中工作,但是当h2标题太长并且达到2 h2行时,我希望行的所有标题都是相同的高度.

这有可能吗？

我做了一个Codepen来说明问题:http://codepen.io/kenvdbroek/pen/eZKdEQ

h1,
h2,
h3 {
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
ul.clean-list {
  margin: 0;
  padding: 0;
}
ul.clean-list li {
  list-style: none;
  margin-bottom: 5px;
}
li:last-child {
  margin-bottom: 0;
}
.container {
  padding-top: 50px;
}
.block {
  margin-bottom: 30px;
  border: 1px solid red;
}
.block > .bottom {
  border: 1px solid blue;
}
@media only screen and (min-width: 480px) { …

你好，谁能帮我解决这个问题，我希望 lorem ipsum 在每个里都有相同的高度，但不是最大高度。当我有 4 行标题时，我希望每个标题都有 4 行高度

h2 {
  margin-top: 0;
    flex: 1 0 auto
}

这里的例子：

https://codepen.io/anon/pen/qxvJqw

我想实现这样的东西，但不是 flex: 0 1 100px 或类似的东西我想灵活一些，当最大的标题有 4 行时，所有的标题都有 4 行，当最大的标题有 2 行时，所有的标题都有两行 我将非常感谢您的帮助谢谢

我有一排有2列.在这些列中,我有一个标题,内容和列表.它们的内容长度不同.

我想要实现的是,列表在同一行上彼此相邻,而不会破坏引导移动优化.

我首先尝试了3个不同的行,但是当列中断时,内容不再相互属于.没有JavaScript,我有什么需要的解决方案吗？也许以某种方式使用flexbox？

这是我目前的代码:

<div class="light-grey-section ruler">
   <div class="container">
      <div class="row">
         <div class="light-section col-xs-12 col-md-6">
            <div class="panel panel-default panel-blank">
               <div class="panel-body">
                  <div class="content"> // contentlength is different in each column
                     <h2>
                        Lorem ipsum Lorem ipsum
                     </h2>
                     <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
                     </p>
                     <p>
                        Lorem …