我正在嘗試在標(biāo)題旁邊獲取響應(yīng)行上面的圖片來自pdf而不是網(wǎng)站我嘗試使用帶有邊框底部的 Div 但它不合適，因?yàn)樗倪吙蛭恢幂^低，然后我嘗試使用一個(gè)<hr并且它沒有正確對齊的同樣的東西有一個(gè)在底部中心等。如何實(shí)現(xiàn)類似的效果，而不必每隔幾個(gè)像素設(shè)置響應(yīng)式樣式。<div class="container"> <div class="we-are"> <div class="row"> <div class="col-md-4"> <h2>We are.</h2> </div> <div class="col-md-8 line-right"> <hr> </div> </div> </div> </div>.line-right hr{ position: absolute; bottom: 0; width: 100%; border: 0; border-bottom: 5px #BFE2CA solid; }我的結(jié)果：我確實(shí)意識到我當(dāng)然可以做類似的事情 marign-top:50px 但它不會(huì)非常敏感
2 回答
呼喚遠(yuǎn)方
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊
我建議使用偽元素的不同方法
這里是你的 HTML 代碼：
<div class="container">
<div class="we-are">
<div class="row">
<div class="parent">
<h2>We are.</h2>
</div>
</div>
</div>
</div>
這是你的 CSS，其中的行是由后面的 _pseudo-element 組成的：
h2 {
margin: 0;
}
.parent {
position: relative;
width: auto;
display: inline-block;
}
.parent:after{
display: block;
content: "";
position: absolute;
bottom: 4px;
left: calc(100% + 20px);
width: 500px; /* Or whatever you need, e.g. width: calc(100vw - 200px); */
height: 5px;
background: #BFE2CA;
}
如果你想讓線條垂直對齊，只需相應(yīng)地改變你的CSS（刪除底部并添加頂部）：
top: 50%;
transform: translateY(-50%);
這是一個(gè)正在運(yùn)行的 Codepen：https://codepen.io/alezuc/pen/dyYGxYY
www說
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超8個(gè)贊
當(dāng)字體或屏幕變化時(shí)，您應(yīng)該使用類似動(dòng)態(tài)的東西，您必須首先將線條設(shè)置為句點(diǎn)符號，然后即使您增加/減少不應(yīng)該改變線條的字體。
你可以嘗試這樣的事情。您可以嘗試更改字體，您會(huì)看到線條粘在相同的位置，您只需根據(jù)字體增加線條的高度即可。
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: 5px;
border: 1px solid red;
}
.parent {
position: relative;
width: auto;
display: inline-block;
font-size:3em; /* change the size and see the difference */
}
.parent:after {
content: "";
position: absolute;
bottom: 20%;
left: calc(100% + 20px);
width: 500px;
/* height is the only thing you have to change irrespective of the font. */
height: 5px;
background: #BFE2CA;
}
<div class="container">
<div class="we-are">
<div class="row">
<div class="parent">
<h2>We are.</h2>
</div>
</div>
</div>
</div>
- 2 回答
- 0 關(guān)注
- 178 瀏覽
添加回答
舉報(bào)
0/150
提交
取消