我正在使用 Bootstrap 3，我想像這樣排成一行：
所以這是我嘗試的方法：
<div class="news-section">
<div class="row">
<div class="col-md-6 news-card">
<div class="news-content">
<div class="news-para">
Lorem ipsum ...
</div>
<div class="news-image">
</div>
</div>
</div>
<div class="col-md-6 news-card">
<div class="news-content">
<div class="news-para">
Lorem ipsum ...
</div>
<div class="news-image">
</div>
</div>
</div>
</div>
</div>
但我真的不知道如何使news-image包含image, 的news-contentdiv覆寫div。
所以如果你能幫我解決這個問題，我真的很感激......
提前致謝。
uj5u.com熱心網友回復：
這是一種方法：
使用
relative的定位parent。使用
absolute定位child和調整位置。
.parent {
position: relative;
width: 250px;
height: 100px;
background: #dbdbdb;
}
.child {
position: absolute;
height: 120px;
width: 120px;
background: #fff;
border-radius: 6px;
border: 1px solid #000;
left: 10px;
top: -10px;
}
.text {
position: absolute;
left: 135px;
top: 50%;
transform: translateY(-50%)
}<div class="parent">
<img src="https://i.picsum.photos/id/995/536/354.jpg?hmac=kARkIcQD-5FYzmRwd89uPn6yxoJvaCg43bkO-kABGGE" alt="" class="child">
<span class="text">Lorem text</span>
</div>小提琴代碼
uj5u.com熱心網友回復：
通過查看這個問題，我可以建議您將其position:relative用于父元素（即news-content）。然后position:absolute在此處添加子元素（即news-image）。之后用邊距偏移子元素以根據上圖定位它們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403308.html
標籤：
上一篇：如何正確切換圖示按鈕？