Question

这些是要求：

将display:flex用于父元素
flex-container中的元素文本必须对齐底部;即当一行复制中断为两行或三行或更多行时，其他同级元素仍应垂直对齐到主要末尾。
没有javascript或overflow:hidden黑客。

父容器是一个普通的块级元素，就像div。

内部标记很灵活，但需要包含链接和底部边框，但我宁愿避免过度嵌套。

到目前为止，我已经能够使用align-self: flex-end将子元素保持在底部对齐，但高度并不相同。我可以通过删除此属性并仅保留flex:1来均衡高度，但这不会垂直对齐底部。

这是我迄今为止所获得的代码集（详见下文）：http://codepen.io/oomlaut/pen/ZQJdZP。任何帮助都是值得赞赏的，因为我还没有掌握柔性盒的主题。

* {
  box-sizing:border-box;
}
.flexcontainer {
  position:relative;
  outline: 1px dashed #333;
  list-style-type:none;
  width:400px;
  margin:0 auto;
  padding:1em;
  background:blue;

  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

}
.flexitem {
  width:25%;
  padding:1em;
  display:flex;
  flex: 1;
  align-self: flex-end; /* <--- removing this will normalize heights but remove vertial align:bottom */
}
.flexcontainer a{
  text-decoration:none;
  border-bottom:1px solid red;
  background:gray;
}
.flexcontainer a:hover{
  background:white;
}

<div class="flexcontainer">
  <a class="flexitem" href="#">Link1</a>
  <a class="flexitem" href="#">Another Link2</a>
  <a class="flexitem" href="#">Link3</a>
  <a class="flexitem" href="#">Link4</a>
</div>

Answer 1

你需要的是：

i.e.  if "Certificate Error" in driver.find_element_by_xpath("//title").text

而不是

string connectionString = @"Data Source=SYAZANA,1433;Initial Catalog=WangSCM;integrated security=true;"

因为你想对齐内容，而不是容器本身;）

http://codepen.io/anon/pen/YwxmBa

等高的元素，在flexbox容器中底部对齐，纯CSS

1 个答案: