Question

尝试更好地对齐一行的某些子部分。我使用flex：1;设法在同一行上获得＆＃34; Read more＆＃34; -button。但是，我似乎无法获得图像的顶部并开始第一段以便很好地对齐。

布局是一系列div，其中包含文章：

<div class="row-X">
  <article>
    <header></header>
    <main></main>
    <footer></footer>
  </article>
</div>

这是我正在寻找的结果：http://imgur.com/XqvijDX

这就是我得到的：http://codepen.io/anon/pen/PqveNq

Answer 1

<强> codepen demo

header{
  min-height:140px;
}

在这种情况下，

给标题指定最小高度。

Answer 2

看看： DEMO

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

#img-1 {
  height: 100px;
  border: 1px solid black;
  width: 100%;
}

#img-2 {
  height: 90px;
  border: 1px solid black;
  width: 100%;
}

.row-2 {
  box-sizing: border-box;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: row;
  margin: 1rem 0;
}
.row-2 > * {
  width: 50%;
  box-sizing: border-box;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.row-2 > * main {
  flex: 1;
}

article {
  float: left;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
}

Flex：将多个项目对齐为一个表格

2 个答案:

CSS