所以我有這個代碼用于我的作業，但我不知道如何使影像位于文本的一側。它一直走到右邊的角落。有人可以幫幫我嗎？我剛開始學習CSS。先感謝您。
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
<img src="cy.png" alt="IMG">
uj5u.com熱心網友回復：
做一張桌子
<table>
<tr>
<td>
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
</td>
<td>
<img src="cy.png" alt="IMG">
</td>
</table>
uj5u.com熱心網友回復：
您能否澄清一下，您是否想讓它轉到文本的右側？
通常，標簽的align屬性img是您想要的，并且您通常在嘗試與之對齊的東西之前想要它。
我還建議共享一個 jsFiddle，以便人們可以使用代碼。
<img src="https://images.pexels.com/photos/13728847/pexels-photo-13728847.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="IMG" align="right">
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><be>
https://jsfiddle.net/f1e7b6d8/
uj5u.com熱心網友回復：
很高興看到你開始了 CSS 之旅。
在 css 的幫助下，有 X 種方法可以解決您的問題。
- 漂浮
- 彈性盒
- 網格
- 位置
所以對于初學者來說，我想在 float 的幫助下解決你的問題。如果你不能理解我的代碼，那么你可以參考任何網站來了解 css float 屬性。
-------------CSS 檔案-------------
.content {
float: right;
}
.image {
float: left;
}
.clear {
clear: both;
}
------------- HTML 檔案 -------------
<div class="content">
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
</div>
<div class="image">
<img
src="your_image_path"
alt="IMG">
</div>
<div class="clear"></div>
</body>
uj5u.com熱心網友回復：
你有很多方法可以通過 CSS 來實作，你可以使用 Float 、 FlexBox 、 Grid 、 Position
您可以保持 HTML 原樣，但只需進行簡單修改即可將 img 標簽放在文本下方
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<img src="cy.png" alt="IMG">
<button class="but1">Example</button>
<button class="but2">Example</button><br>
在您的 CSS 檔案中，您可以使用
.txt {
float: left;
}
.img {
float: right;
}
button {
clear: both;
}
希望這能解決您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/513296.html
標籤：htmlcss网络
上一篇：為什么我不能將API回應映射到Angular中的介面？
下一篇：從字典物件中獲取多個陣列