我所有HTML中都有一个部分,需要在其中使用flexbox。下面的CSS正在影响HTML中的所有行和列。我只需要下面的CSS代码即可影响我在此处发布的HTML。
我该如何实现?
最诚挚的问候
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row>[class*='col-'] {
display: flex;
flex-direction: column;
}
<div class="section">
<div class="bestseller-wrap">
<div class="row">
<div class="col-sm-3" style="background-color: aqua;">
<h3>Here is a headline</h3>
<input type="submit" value="Subscribe">
</div>
<div class="col-sm-9">
<img src="/img/test.jpg">
</div>
</div>
</div>
</div>
使用.bestseller-wrap .row
和.bestseller-wrap .row>[class*='col-']
作为选择器仅影响此元素中的行和列。
如果需要将其绑定到节本身,请在HTML中将一个类应用于该节,并使用该类代替.bestseller-wrap
.bestseller-wrap .row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.bestseller-wrap .row>[class*='col-'] {
display: flex;
flex-direction: column;
}
<div class="section">
<div class="bestseller-wrap">
<div class="row">
<div class="col-sm-3" style="background-color: aqua;">
<h3>Here is a headline</h3>
<input type="submit" value="Subscribe">
</div>
<div class="col-sm-9">
<img src="/img/test.jpg">
</div>
</div>
</div>
</div>
只需添加一个类!
.section-headline .row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.section-headline .row>[class*='col-'] {
display: flex;
flex-direction: column;
}
<div class="section section-headline">
<div class="bestseller-wrap">
<div class="row">
<div class="col-sm-3" style="background-color: aqua;">
<h3>Here is a headline</h3>
<input type="submit" value="Subscribe">
</div>
<div class="col-sm-9">
<img src="/img/test.jpg">
</div>
</div>
</div>
</div>
<div class="row">
<h5>A different row</h5>
</div>