我目前在使用某些样式时出现问题,我正在寻求帮助。目前我有几个由灰色线分隔的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中相同(如果有意义的话,让我知道,如果没有)
//图片需要在左边,内容在任何时候,在它包装不正确的那一刻
答案 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
,就像我一样。
编辑:我猜不是。
.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;