Question

我有以下代码和以下问题：

我需要让.lt的所有子代获得最大的高度。（请参见冷杉.lt}上的红色边框。因为我使用align-items: stretch;
我需要元素.left的内容为v / h中心。因此，我使用align-self:center;，但这取消了拉伸。（红色边框会减少）
我需要将.right元素左右对齐。

.container { 
display: flex;
flex-direction:column;
}

.lt{
align-items: stretch;
border: 1px solid #e3e3e3;
display: flex;
margin-bottom: 1.5rem;
}

.left { 
border-right: 1px solid red;
flex: 0 0 90px;
padding: 8px;
align-self:center;
justify-content: center;
}

.right { 
justify-self: flex-start;
}

<div class="container">

  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75"/>
        abcd
      </a>
    </div>
    <div class="right">
dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
       the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
</div>  



    <div class="lt">
      <div class="left">
        <a href="">
          <img src="https://via.placeholder.com/75"/>
          abcd
        </a>
      </div>
      <div class="right">
        dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default mode
    </div>
    </div>
</div>

Answer 1

您可以使用简单的渐变来替换边框，因为您知道图像的宽度，因此可以正确放置它：

.container {
  display: flex;
  flex-direction: column;
}

.lt {
  align-items: stretch;
  border: 1px solid #e3e3e3;
  display: flex;
  margin-bottom: 1.5rem;
  background:
    linear-gradient(red,red) 105px 0/1px 100% no-repeat;
}

.left {
  flex: 0 0 90px;
  padding: 8px;
  align-self: center;
  text-align:center;
}

<div class="container">

  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </div>



  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default mode
    </div>
  </div>
</div>

或者简单地使用嵌套的flexbox容器。保持第一个处于拉伸状态，并将内容置于其中：

.container {
  display: flex;
  flex-direction: column;
}

.lt {
  align-items: stretch;
  border: 1px solid #e3e3e3;
  display: flex;
  margin-bottom: 1.5rem;
}

.left {
  flex: 0 0 90px;
  padding: 8px;
  border-right:1px solid red;
  display:flex;
  flex-direction:column;
  justify-content: center;
  text-align:center;
}

<div class="container">

  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
      by accident, sometimes on purpose (injected humour and the like). the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </div>



  <div class="lt">
    <div class="left">
      <a href="">
        <img src="https://via.placeholder.com/75" /> abcd
      </a>
    </div>
    <div class="right">
      dable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default mode
    </div>
  </div>
</div>

灵活运用盒子，尝试将父母的“拉伸”和一个孩子的“居中”结合起来

1 个答案: