我有两个内联块元素,分别是容器-ExternalProject_Add
和#keyPointsBlock
。带有图像的图块将始终更高。我想匹配两个元素的高度,因此#caseSlider
必须与#keyPointsBlock
相同。在这种情况下,我无法将父元素的#caseSlider
更改为固定数字。
有没有办法做到这一点?
height: auto
/*-- Slider Section --*/
#slideSec {
width: 100%;
height: auto;
min-height: 400px;
}
.slideSecBlock {
display: inline-block;
vertical-align: top;
height: 400px;
position: relative;
}
/*- Key Points -*/
#keyPointsBlock {
width: 40%;
background: green;
position: relative;
}
#keyPointsTitle {
font-family: 'Muli', sans-serif;
font-size: 2rem;
letter-spacing: .2rem;
text-transform: uppercase;
}
#keyPointsList {
text-decoration: none;
}
#keyPointsList li {
margin-bottom: 8px;
}
/*- Case Slider -*/
#caseSlider {
width: 60%;
height: auto;
}
.caseSlide {
width: 100%;
height: 100%;
}
.caseSlide img {
width: 100%;
height: 100%;
object-fit: contain;
}
答案 0 :(得分:2)
只需使用Flexbox并将display: flex
添加到您的#slideSec
中,它们就会以相同的高度对齐。
这可作为行方向上的子级子项(默认值)使用,默认值为align-items
stretch
,将使同一行上的所有子级都具有相同的高度,无论哪个最高
此外,在您的display: block
中添加img
,使其正确对齐(不包含行内/块元素周围的空白),然后删除所有height: 100%
(和height: auto
,因为它是默认设置),因为它不适用于Flexbox。
注意,在下面的代码示例中,我删除了不必要的属性。
如果您也需要控制内部元素,最好嵌套Flexbox。
堆栈片段
/*-- Slider Section --*/
#slideSec {
min-height: 400px;
display: flex;
}
.slideSecBlock {
position: relative;
}
/*- Key Points -*/
#keyPointsBlock {
width: 40%;
background: green;
position: relative;
}
#keyPointsTitle {
font-family: 'Muli', sans-serif;
font-size: 2rem;
letter-spacing: .2rem;
text-transform: uppercase;
}
#keyPointsList {
text-decoration: none;
}
#keyPointsList li {
margin-bottom: 8px;
}
/*- Case Slider -*/
#caseSlider {
width: 60%;
}
.caseSlide {
}
.caseSlide img {
display: block;
width: 100%;
object-fit: contain;
}
<section id="slideSec">
<div class="slideSecBlock" id="keyPointsBlock">
<div>
<h2 id="keyPointsTitle">Key Points</h2>
<ul id="keyPointsList">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
<div class="slideSecBlock" id="caseSlider">
<div class="caseSlide">
<img src="https://justifiedgrid.com/wp-content/uploads/life/biking/137646854.jpg" alt="">
</div>
</div>
</section>
答案 1 :(得分:1)
您可以使用flex-box实现此目的。我对#slideSec
进行了CSS更改-添加了flex
,并为.slideSecBlock
删除了高度。使用flexbox here
/*-- Slider Section --*/
#slideSec {
width: 100%;
height: auto;
min-height: 400px;
display: flex;
}
/*- Key Points -*/
#keyPointsBlock {
width: 40%;
background: green;
}
#keyPointsTitle {
font-family: 'Muli', sans-serif;
font-size: 2rem;
letter-spacing: .2rem;
text-transform: uppercase;
}
#keyPointsList {
text-decoration: none;
}
#keyPointsList li {
margin-bottom: 8px;
}
/*- Case Slider -*/
#caseSlider {
width: 60%;
}
.caseSlide {
width: 100%;
font-size: 0;
}
.caseSlide img {
width: 100%;
height: 100%;
object-fit: contain;
}
<section id="slideSec">
<div class="slideSecBlock" id="keyPointsBlock">
<div>
<h2 id="keyPointsTitle">Key Points</h2>
<ul id="keyPointsList">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div><div class="slideSecBlock" id="caseSlider">
<div class="caseSlide">
<img src="https://justifiedgrid.com/wp-content/uploads/life/biking/137646854.jpg" alt="">
</div>
</div>
</section>