html - 使用 flex 从列和内部列行中分离/网格化，并在中心的一列中对齐图像

Question

我正在从 float 到 flexbox 我有一些问题。

我有以下代码:

.card {
  display: flex;
  flex-direction: row;
  border: 1px solid green;
   margin-bottom: 0.8rem;
}

.card .image {
 border-right: 1px solid #E3E3E3;
 padding: 1.2rem;
vertical-align: middle;
}

.card .body {
 padding: 1.2rem;
 display: flex;
 flex-direction: column;
}

.card .logo {
 margin-bottom: 0.8rem;
}

title {  padding:  0 0 0.8rem 0;}
text { padding: 0}

<div class="card">
    <div class="image"><img src="../img/product_image_sample1.png" width="120"></div>
    <div class="body">
        <img src="logo_sample.png" width="120"/>
        <a href=# class="title">KIT</a>
        <span class="text"> tae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum</span>
</div>
</div>

我希望 .image 在中间垂直对齐，并在 logo、title 和 text 之间填充底部；

我需要使用 IE10，也需要 IE11。

Answer 1

问题 1:Flexbox 无法在 I.E 11 及以下版本上实现，因此您必须使用 float 作为后备。 (如果这对您可行，请在下面添加评论或提出新问题)

在居中检查我编辑的 css。将 flexbox 添加到 item 并使用 align-items:center 使其垂直居中。

在您的标记中，您忘记为 Logo 添加类。这就是它不起作用的原因。

.card {
  display: flex;
  flex-direction: row;
  border: 1px solid green;
   margin-bottom: 0.8rem;
}

.card .image {
 border-right: 1px solid #E3E3E3;
 padding: 1.2rem;
  /*Make the item a flexbox item and center the item vertically*/
  display: flex;
  align-items: center;
}

.card .body {
 padding: 1.2rem;
 display: flex;
 flex-direction: column;
}

.card .logo {
 padding: 0 0 0.8rem 0;
}

title {  padding:  0 0 0.8rem 0;}
text { padding: 0}

<div class="card">
    <div class="image"><img src="https://images.unsplash.com/photo-1492257027549-2617847dc868?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=494b1d11506d9e6babb320454e8a5798" width="120"></div>
    <div class="body">
        <img src="https://images.unsplash.com/photo-1492257027549-2617847dc868?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=494b1d11506d9e6babb320454e8a5798" width="120" class="logo" />
        <a href=# class="title">KIT</a>
        <span class="text"> tae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum</span>
</div>
</div>