我正在嘗試在標題旁邊獲取響應行上面的圖片來自pdf而不是網(wǎng)站我嘗試使用帶有邊框底部的 Div 但它不合適，因為它的邊框位置較低，然后我嘗試使用一個<hr并且它沒有正確對齊的同樣的東西有一個在底部中心等。如何實現(xiàn)類似的效果，而不必每隔幾個像素設置響應式樣式。<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; }我的結果：我確實意識到我當然可以做類似的事情 marign-top:50px 但它不會非常敏感
2 回答
呼喚遠方
TA貢獻1856條經(jīng)驗 獲得超11個贊
我建議使用偽元素的不同方法
這里是你的 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;
}
如果你想讓線條垂直對齊，只需相應地改變你的CSS（刪除底部并添加頂部）：
top: 50%;
transform: translateY(-50%);
這是一個正在運行的 Codepen：https://codepen.io/alezuc/pen/dyYGxYY
www說
TA貢獻1775條經(jīng)驗 獲得超8個贊
當字體或屏幕變化時，您應該使用類似動態(tài)的東西，您必須首先將線條設置為句點符號，然后即使您增加/減少不應該改變線條的字體。
你可以嘗試這樣的事情。您可以嘗試更改字體，您會看到線條粘在相同的位置，您只需根據(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 關注
- 159 瀏覽
添加回答
舉報
0/150
提交
取消