柔性框方向列：对齐多个高度的项目

Question

请参阅以下示例。

ul {
  display: flex;
}

li {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid green;
  justify-content: flex-start;
  align-items: center
}

ul, h3, h4, p {
  margin: 0;
  padding: 0;
  width: 100%;
}

h3 {
  margin-bottom: auto;
}

h4 {
  border-top: 1px solid green;
  margin-bottom: auto;
}

p {
  border-top: 1px solid green;
}

<ul>
  <li>
    <h3>h3<br>h3<br>h3</h3>
    <h4>h4</h4>
    <p>p</p>
  </li>
  <li>
    <h3>h3</h3>
    <h4>h4</h4>
    <p>p</p>
  </li>
  <li>
    <h3>h3</h3>
    <h4>h4</h4>
    <p>p<br>p</p>
  </li>
</ul>

我正在使用ul li html布局并应用这样的flex-box样式。问题是我必须修复这个弹性框，其中每个项目的顶部彼此对齐。我尝试使用margin-bottom: auto，但由于高度不同，布局“扭曲”。

有谁能告诉我在这种情况下该怎么做？任何其他观点/方法将不胜感激。我的描述并不好，所以如果有什么不清楚的地方，请随时与我讨论。我真的需要你的帮助。

提前致谢！

更新

此图片是我的预期结果：

Answer 1

您无法使用您提供的HTML执行此操作，因为li元素未相互传达其内容大小。相反，您需要分离所有内容以利用自动缩放高度。

为此，您必须将您的li元素分开，而不是已有。

您可以使用flex执行此操作，但您需要更改HTML布局。

请参阅以下示例：

＆＃13;

＆＃13;

/* Flexbox */

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  width:33%;
}



/* Extra styles */

ul, h3, h4, p {
  margin: 0;
  padding: 0;
  width: 100%;
}

h3 {
  margin-bottom: auto;
}

h4 {
  border-top: 1px solid green;
  margin-bottom: auto;
}

p {
  border-top: 1px solid green;
}

＆＃13;

<ul>
  <li>
    <h3>h3<br>h3<br>h3</h3>
  </li>
  <li>
    <h3>h3</h3>
  </li>
  <li>
    <h3>h3</h3>
  </li>
  <li>
    <h4>h4</h4>
  </li>
  <li>
    <h4>h4</h4>
  </li>
  <li>
    <h4>h4</h4>
  </li>
  <li>
    <p>p</p>
  </li>
  <li>
    <p>p</p>
  </li>
  <li>
    <p>p<br>p</p>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我已经更改了HTML的结构，这将对您有所帮助：

try {
  WebSettings settings = view.getSettings();
      settings.setJavaScriptCanOpenWindowsAutomatically(true);
      settings.setSupportMultipleWindows(true);
      settings.setBuiltInZoomControls(true);
      settings.setJavaScriptEnabled(true);
      settings.setAppCacheEnabled(true);
      settings.setAppCacheMaxSize(10 * 1024 * 1024);
      settings.setAppCachePath("");
      settings.setDatabaseEnabled(true);
      settings.setDomStorageEnabled(true);
      settings.setGeolocationEnabled(true);
      settings.setSaveFormData(false);
      settings.setSavePassword(false);
      settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
      // Flash settings
      settings.setPluginState(WebSettings.PluginState.ON);

      // Geo location settings
      settings.setGeolocationEnabled(true);
      settings.setGeolocationDatabasePath("/data/data/selendroid");
    } catch (Exception e) {
      SelendroidLogger.error("Error configuring web view", e);
    }

ul {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid green;
  border-collapse: collapse;
}

li {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  flex-flow: row nowrap;
}

ul,
h3,
h4,
p {
  margin: 0;
  padding: 0;
  width: 100%;
}

h3,
h4,
p {
  flex-grow: 1;
  border: 1px solid green;
  box-sizing: border-box;
}