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>

Answer 2

这样的事情？
我不知道你是否可以将图片更改为div并将其设置为background-image，就像我一样。

编辑：我猜不是。

＆＃13;

.search-result {
  display: flex;
}

.search-result__image {
  background-image: url('http://via.placeholder.com/240x180');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  flex: 0 0 100px;
  margin-right: 20px;
}

.search-result__question {
  font-size: 22px;
  font-weight: normal;
  text-transform: uppercase;
  margin: 0;
}

.search-result__answer {
  font-size: 20px;
  margin: 5px 0 0 0;
}

.search-result__grey-seperator {
  padding: 10px 0;
  border-bottom: 1px solid #e2e2e2;
}

＆＃13;

<div class="search-container__results">
  <article class="search-result">
    <div class="search-result__image"></div>
    <div class="search-result__info-container">
      <h3 class="search-result__question">some text some text some text some text some text</h3>
      <p class="search-result__answer">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    </div>
  </article>
  <div class="search-result__grey-seperator"></div>
</div>

＆＃13;

样式布局协助

2 个答案: