我正在 WordPress 上寫博客文章。我想要的是博客的內(nèi)容應該位于帖子縮略圖旁邊，當圖像結(jié)束時，內(nèi)容應該自動覆蓋其余區(qū)域，我的意思是它應該從左側(cè)的圖像下方開始？這是輸出圖像：在這張圖片中，我使用了 Bootstrap 的網(wǎng)格系統(tǒng)，縮略圖有 6 列，內(nèi)容有 6 列，這是可以的，但我希望內(nèi)容自動填充圖像下的其余空間？如何使用 CSS 或 Bootstrap 來實現(xiàn)它？
1 回答
catspeake
TA貢獻1111條經(jīng)驗 獲得超0個贊
由于您正在使用引導程序。這在當前的設置下是不可能做到的。
將其設置為 50% 的 2 列，其中圖像顯示在另一列中，所有文本/內(nèi)容顯示在另一列中，就像您擁有的一樣。
您可能需要將其設置為 col 或 col-12 并在同一區(qū)域中添加圖像/文本。
想想帶有圖像對齊功能的老式 WordPress 內(nèi)容編輯器。
這是一個您可以模仿以使文本換行的示例。jsfiddle 是一個工作示例。
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/150">
Text goes here
</div>
</div>
</div>
https://jsfiddle.net/bazdin/kmn4u8xd/1/
嗶嗶one
TA貢獻1854條經(jīng)驗 獲得超8個贊
你可以這樣做 -
超文本標記語言
<div class="container">
<div class="row">
<div class="col">
<img class= "pull-left" style="margin: 0px 10px 0px 0px;" src="https://via.placeholder.com/150" width = "150">
<h1>
My Text Heading
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum ultrices mauris eu eleifend. Cras ut nisl lectus. Cras posuere maximus lectus, nec volutpat tellus sodales sit amet. Ut imperdiet imperdiet mauris quis convallis. Nunc erat lacus, faucibus laoreet justo ac, suscipit pulvinar sapien. Fusce id augue ut mauris molestie consectetur. Praesent eget volutpat quam, at ultricies dui. Pellentesque nec augue pharetra ex faucibus sollicitudin sit amet nec diam. Integer ut neque in arcu suscipit condimentum sit amet malesuada diam. Aliquam auctor sapien eros, ac mollis tortor fermentum sit amet.
Duis sed sagittis nulla. Aliquam vitae sodales ante. Aliquam id mattis metus. Suspendisse ultrices nunc ac urna mattis, finibus porta nibh luctus. Mauris condimentum magna a dui tempor, ut consequat mauris euismod. In vel commodo purus, vel luctus erat. Praesent consectetur auctor mattis. Morbi ac ultrices justo. Morbi posuere iaculis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc id mauris nisi.
Fusce sit amet massa sed risus malesuada feugiat ut ac purus. Praesent rhoncus quam nibh, nec sagittis orci dignissim quis. Donec vel venenatis nisl. Donec ultrices ante sed tempus ultrices. Maecenas eget suscipit lectus. Cras sodales, est vel finibus venenatis, mi est consectetur nulla, euismod varius massa turpis eget ante. Praesent et elit malesuada, porta nulla sed, luctus massa. Mauris nec justo mollis, porta arcu porta, convallis ante.
</p>
</div>
</div>
</div>
小提琴
https://jsfiddle.net/guruling/xeyLk1qb/1/
- 1 回答
- 0 關(guān)注
- 179 瀏覽
添加回答
舉報
0/150
提交
取消