html - 样式布局辅助

Question

我目前在某些样式方面遇到了问题，我正在寻求帮助。目前我有几个由灰线分隔的 div，但是 div 的内容并没有垂直位于中间(我已经在网上实现了其他东西，但由于某种原因仍然无法正常工作).

我还有一张图片需要位于标题和文本的左侧(并且如上所示居中)，但就是无法正常工作!

我附上了我的代码和屏幕截图以使其更清晰:)

如有任何帮助，我们将不胜感激 - 谢谢!

.search-result__grey-seperator {
  padding: 10px 0;
  border-bottom: 1px solid #e2e2e2;
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  list-style-type: none;
  margin: 5 0;
}

.search-result__question {
  font-size: 22px;
  font-weight: normal;
  text-transform: uppercase;
}

.search-result__answer {
  font-size: 20px;
}

.search-result__image {
  height: auto;
  width: 100px;
  float: left;
  display: inline-block;
  margin-right: 20px;
}

.search-result__info-container {
  display: inline-block;
}


/*
//Search.scss

.search-result__grey-seperator {
    padding: 10px 0;
    border-bottom: 1px solid #e2e2e2;
    width: 100%;
    font-size: 16px;
    line-height: 26px;
    list-style-type: none; 
    margin: $vr*5 0;
}

.search-result__question {
    font-size: 22px;
    font-weight: normal;
    text-transform: uppercase;
}

.search-result__answer {
    font-size: 20px;
}


.search-result__image {
    height: auto;
    width: 100px;
    float: left;
    display: inline-block;
    margin-right: 20px;
}

.search-result__info-container {
    display: inline-block;
}*/

<div class="search-container__results">


  <article class="search-result">


    <img class="search-result__image" src="http://via.placeholder.com/240x180" />


    <div class="search-result__info-container">
      <h3 class="search-result__question">some text some text</h3>
      <p class="search-result__answer">lorem ipsum lorem ipsum lorem ipsum</p>
    </div>

    <li class="search-result__grey-seperator"></li>


  </article>


</div>

//图像看起来以这个例子为中心，但需要保持一致而不是它的侧面，因为你可以看出灰线上方的间距更大并且需要在所有 div 中保持相同(如果这有意义，让我知道如果没有)

//图像需要一直在左边，内容在右边，在它包裹不正确的那一刻

Answer 1

如果 {result.Title} 和 {result.Summary} 是单行，你可以尝试这样做:

.search-result__info-container {
    display: inline-block;
    top: calc(50% - 73px);
    position: absolute;
}

编辑:我不确定你想要什么图像，但至少其中一个应该是静态的。另一种可能的实现见下文。

.search-result{
   position: relative;
}

.search-result__question {
    font-size: 22px;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 18px;
}

.search-result__info-container {
    display: inline-block;
    width: calc(100% - 120px);
    height: 95px;
    margin-left: 120px;
}

.search-result__image {
    width: 100px;
    float: left;
    display: inline-block;
    margin-right: 20px;
    max-width: 100px;
    position: absolute;
    top: calc(50% - 43px);
    height: 75px;
}

.search-result__grey-seperator {
    padding: 11px 0;
    border-bottom: 1px solid #e2e2e2;
    width: 100%;
    font-size: 16px;
    line-height: 27px;
    list-style-type: none;
}

<div class="search-container__results">
  <article class="search-result">
    <img class="search-result__image" src="http://via.placeholder.com/240x180" />
    <div class="search-result__info-container">
      <h3 class="search-result__question">some text some text</h3>
      <p class="search-result__answer">lorem ipsum lorem ipsum lorem ipsum</p>
    </div>
    <li class="search-result__grey-seperator"></li>
  </article>
</div>