Question

我一直在玩flex-box一段时间，但现在我遇到了问题。我做了几个盒子，每个盒子里面有3个项目，一个图像一个段落和一个按钮。图像和段落需要保持在顶部，而按钮需要在行的底部对齐。谢谢您的时间:)）

HTML：


cmake ../kicad \
    -DCMAKE_C_COMPILER=clang \
    -DCMAKE_CXX_COMPILER=clang++ \
    -DCMAKE_OSX_DEPLOYMENT_TARGET=10.10 \
    -DwxWidgets_CONFIG_EXECUTABLE=../wx-bin/bin/wx-config \
    -DKICAD_SCRIPTING=OFF \
    -DKICAD_SCRIPTING_MODULES=OFF \
    -DKICAD_SCRIPTING_WXPYTHON=OFF \
    -DCMAKE_INSTALL_PREFIX=../bin \
    -DCMAKE_BUILD_TYPE=Release \
    -DKICAD_SKIP_BOOST=ON \
    -DCMAKE_OSX_SYSROOT=/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.11.sdk

CSS：

<div class="parent">
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>e egestas, dui nibh gravida urna</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Suspendisse eta</p>
    <input type="button" value="bring me down!">
  </div>

  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>orem ipsum dolor sit amet</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>e egestas, dui nibh gravida urna</p>
    <input type="button" value="bring me down!">
  </div>

  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>orem ipsum dolor sit amet</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p> est id, vestibulum vestibulum metu</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>

</div>

http://jsfiddle.net/ou6wLg1m/

Answer 1

你可以这样做：

使用public static void BFS(HashMap<String, LinkedList<String>> adjLst, String start) { Queue<String> queue = new ArrayDeque<>(); HashSet<String> seen = new HashSet<>(); queue.add(start); while(0 != queue.size()){ String vertex = queue.poll(); if(!seen.contains(vertex)){ System.out.print(vertex + " "); queue.addAll(adjLst.get(vertex)); // Add all neighbors of 'vertex' to the queue seen.add(vertex); } } }修复position: absolute上的按钮，并将相同的bottom提供给主div，以调整您的padding-bottom按钮需求。

<强> CSS

height

<强> DEMO HERE

Answer 2

孩子基本上是一个列，因此您可以使用flexbox和flex-direction列。

.parent {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.parent .child {
  border: 1px solid black;
  flex: 1 1 32%;
    display: flex;
    flex-direction: column;
    align-items:flex-start;

}

.parent .child input {
  width: 100%;
  margin-top: auto;
  align-self: flex-end; 
}

.parent {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.parent .child {
  border: 1px solid black;
  flex: 1 1 32%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.parent .child img {} .parent .child input {
  width: 100%;
  margin-top: auto;
  align-self: flex-end;
}

<div class="parent">

  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>

  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>e egestas, dui nibh gravida urna</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Suspendisse eta</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>orem ipsum dolor sit amet</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>e egestas, dui nibh gravida urna</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>orem ipsum dolor sit amet</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>est id, vestibulum vestibulum metu</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>
</div>

Css flex-box - 如何将单个项目对齐到底部，同时将其他项目保持在顶部

2 个答案: