我希望我的影像向右浮動。但如果我使用浮動：對；寫一個命令，它也需要它的部分。見圖片。圖片已經偏到右邊了，因為它太大了。（其余部分是透明的）。
#second {
background-color: black;
}
.orange {
height: 10px;
background-color: #F54703;
}
#secondBild {
float: right;
}<div>
<section id="first">
<img src="bilder/Oben_rechtsunten.png">
</section>
<section class="orange"></section>
</section>
<section id="second">
<img src="bilder/Seite_unten.png" id="secondBild">
</section>
<section class="orange">
</div>uj5u.com熱心網友回復：
我假設當您宣告“它占用該部分”時，意味著您希望 id = 'second' 的部分占據其中的空間并將影像推到右側。為此，您可以將包裝 div 設定為 display: flex 然后使用 flex-grow 使第二部分展開。要將影像在“第二”部分向右移動，請使用 margin-inline: auto 0; 您還必須使影像成為塊元素。如果這不是您要找的內容，請給我留言，我將進行編輯。
下面完全標記了 html 和 css
div {
display: flex;
}
#second {
flex-grow: 1; /* added this */
background-color: black;
}
.orange {
height: 10px;
background-color: #F54703;
}
#secondBild {
/*float: right;*/
margin-inline: auto 0; /* added this */
display: block; /* added this */
}<div>
<section id="first">
<img src="https://www.fillmurray.com/200/200">
</section>
<section class="orange"></section>
</section>
<section id="second">
<img src="https://picsum.photos/200" id="secondBild">
</section>
<section class="orange">
</div>uj5u.com熱心網友回復：
哦，我找到了辦法。我只是將影像放在背景中，如下所示：
#first{
background-color: white;
background-image: url(bilder/Oben_rechtsunten.png);
background-position: right;
background-size: contain;
background-repeat: no-repeat;
height: 1000px;
}
uj5u.com熱心網友回復：
該float屬性將元素從頁面的正常流程中移除，因此塊父級不會包裝浮動內容。您可以通過添加display: flow-root到父元素來包裝其浮動內容來解決此問題。有關詳細資訊，請參閱塊格式化背景關系。
#second {
display: flow-root;
}
#secondBild {
float: right;
}
如果您不想使用，另一個簡單的解決方案float是添加text-align: right;
到父元素。
#second {
text-align: right;
}
uj5u.com熱心網友回復：
#img-container {
display: flex;
align-items: right;
}
Use `display: flex;` and `align-items: right;`<div id="img-container">
<img src="#" id="image">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/530167.html
標籤：htmlcss图片