Question

例如，我正在尝试堆叠具有不同高度的块，如下所示：

.container {
  display: flex;
  flex-flow: row wrap;
}
.box {
  width: 50%;
  height: 50px;
  background-color: lightgreen;
}
.box2 {
  width: 50%;
  height: 25px;
  background-color: lightgreen;
}

<div class="container">
  <div class="box"></div>
  <div class="box2"></div>
  <div class="box2"></div>
</div>

应该如何：

Answer 1

据我所知，只有将<div class="box2">包装内的两个<div class="box">嵌套

，才能解决这个问题。

＆＃13;

.container {
  display: flex;
  flex-flow: row wrap;
}

.box {
  width: 50%;
  height: 50px;
  background-color: lightgreen;
}

.box2 {
  width: 100%;
  height: 25px;
  background-color: lightgreen;
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <div class="box">
    <div class="box2"></div>
    <div class="box2"></div>
  </div>
</div>

＆＃13;

这是一个例子： https://jsfiddle.net/7j6uknck/2/

Answer 2

另一个解决方案为该特定方案提供了一个有效的flexbox示例。

但如果flexbox不是强制性的，并且您不想更改html结构，则可以使用float来表示您的特定布局。

＆＃13;

.container { 
}
.box {
float:left;
  width: 50%;
  height: 50px;
  background-color: lightgreen;
}
.box2 {
  float:right;
  width: 50%;
  height: 25px;
  background-color: lightgreen
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <div class="box2"></div>
  <div class="box2"></div>
</div>

＆＃13;

Answer 3

另一种解决方案（但对于这种情况而言比通用解决方案更多的是黑客攻击）是保留所有内容并调整最后一个元素的边距。

当然，保证金最高值将取决于其他值

＆＃13;

    Process: com.test.test, PID: 4097
     java.lang.RuntimeException: Unable to start activity ComponentInfo{com.test.test/com.test.test.MainActivity}: java.lang.IllegalStateException: No instrumentation registered! Must run under a registering instrumentation.
         at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2817)
         at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2892)
         at android.app.ActivityThread.-wrap11(Unknown Source:0)
         at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1593)
         at android.os.Handler.dispatchMessage(Handler.java:105)
         at android.os.Looper.loop(Looper.java:164)
         at android.app.ActivityThread.main(ActivityThread.java:6541)
         at java.lang.reflect.Method.invoke(Native Method)
         at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
         at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
      Caused by: java.lang.IllegalStateException: No instrumentation registered! Must run under a registering instrumentation.
         at android.support.test.InstrumentationRegistry.getInstrumentation(InstrumentationRegistry.java:45)
         at android.support.test.InstrumentationRegistry.getContext(InstrumentationRegistry.java:75)
         at com.test.test.MainActivity.setUp(MainActivity.java:61)
         at com.test.test.MainActivity.testSingleGames(MainActivity.java:69)
         at com.test.test.MainActivity.onCreate(MainActivity.java:122)
         at android.app.Activity.performCreate(Activity.java:6975)
         at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1213)
         at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2770)
         at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2892) 
         at android.app.ActivityThread.-wrap11(Unknown Source:0) 
         at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1593) 
         at android.os.Handler.dispatchMessage(Handler.java:105) 
         at android.os.Looper.loop(Looper.java:164) 
         at android.app.ActivityThread.main(ActivityThread.java:6541) 
         at java.lang.reflect.Method.invoke(Native Method) 
         at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240) 
         at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

＆＃13;

.container {
  display: flex;
  flex-flow: row wrap;
}
.box {
  width: 50%;
  height: 50px;
  background-color: lightgreen;
}
.box2 {
  width: 50%;
  height: 25px;
  background-color: red;
}
.box2:last-child {
  margin-left:auto;
  margin-top:-25px;
}

＆＃13;

如何将flex行用于不同高度的元素

3 个答案: