样式布局协助

时间:2018-03-16 14:56:49

标签: html css sass

我目前在使用某些样式时出现问题,我正在寻求帮助。目前我有几个由灰色线分隔的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中相同(如果有意义的话,让我知道,如果没有)

enter image description here

//图片需要在左边,内容在任何时候,在它包装不正确的那一刻

enter image description here

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:-1)

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

编辑:我猜不是。

&#13;
&#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;
&#13;
&#13;