我正在嘗試將figure左對齊并將同一行上的文本向右對齊，這是我的 html：
<div class="container px-0">
<div class="row">
<h2 style="text-align:center;"><strong>Lorem Ipsum</strong></h2>
<figure class="image image-style-align-left"><img src="https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-preview.jpg"></figure>
<p style="margin-left:0px">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>我嘗試了不同的屬性，例如：
figure {
float: right;
text-align: right;
}
但figure仍然采用完整的行寬。我該如何解決？
uj5u.com熱心網友回復：
這會我認為//添加此樣式
figure {
display: inline;
float: left;
}
uj5u.com熱心網友回復：
從代碼片段中的 CSS 類中，我相信您使用了 Bootstrap，因此我將 Boostrap 5.0.2 插入到代碼片段中，并稍微修復了結構，同時max-width對內部影像進行了調整figure
figure img {
max-width: 100%;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container px-0">
<div class="row">
<h2 style="text-align:center;"><strong>Lorem Ipsum</strong></h2>
<div class="row">
<div class="col-6">
<figure class="image image-style-align-left"><img src="https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-preview.jpg"></figure>
</div>
<div class="col-6">
<p style="margin-left:0px">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>uj5u.com熱心網友回復：
您的figure塊從用戶代理樣式表繼承了 40px 的左邊距（至少，這是我在這里看到的）。要洗掉它，請margin: 0在您自己的樣式表中應用，您應該會發現該圖形已根據需要向左對齊。
要除錯此類問題，瀏覽器的 Inspector 工具非常有用。右鍵單擊您感興趣的元素并選擇“檢查元素”，您將獲得一系列資訊，包括計算出的大小、邊距和填充，以及正在使用的所有樣式的詳細視圖在元素上。
===使用片段編輯===
<div class="container px-0">
<div class="row">
<h2 style="text-align:center;"><strong>Lorem Ipsum</strong></h2>
<figure class="image image-style-align-left" style="margin:0;"><img src="https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-preview.jpg"></figure>
<p style="margin-left:0px">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>===編輯2===
好的，您已經分享了有關您的問題的更多資訊 - 特別是您無法更改 HTML，并且您希望文本塊流向影像塊的右側。假設這是準確的并且您只能對 CSS 檔案進行更改，那么您能做的最好的事情就是這樣：
.row .figure {
float: left;
width: 50%;
}
.row p {
float: right;
width: 50%;
}
如果您不喜歡使用浮點數，而是使用不同的方案，例如 flexbox，原理是相同的。但是您將在選擇器中遇到精度方面的重大問題：當然，將樣式應用于figureorp它將適用于任何地方。因此，如果您無法id向相關塊添加特定的類甚至標簽，那么您可能就不走運了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/324897.html