如何保留一個區塊而不是其他區塊來包裹浮動圖像？

這顯示了<img>標籤浮動左的結果。利潤率並非全部達成，但<h1>標籤正在包裝。如果<table>標籤不是那麼寬，那麼下面的書簡介也將包裝。我想要這些元素來包裝。

但是，我不希望<table>標記的內容換行。當它包裝時，它會作爲一個完整的塊包裝，如上圖所示。這只是一小部分「流派」標籤的問題，這些標籤有點太長了。當使用較短的「流派」標籤時，<table>塊靠在茶色容器的頂部，一切看起來都很好。如果被迫減少文本大小，但我真的不想。出於純粹的美學原因，我寧願表不包裝和表的左側有時會低於<img>，因爲如果<img>是position:relative;將會如此。這可能嗎？

基本HTML

<h1>Title Text</h1> 
<table>...</table> 
<div>Lorem Ipsum...</div> 
<img>

現有的CSS

img{ float:left; }

目標：

要允許<h1>和<div>內容包裝<img>，因爲它爲float:left;，但<table>內容低於<img>，就好像<img>是position:relative;。

遺憾的是，我試圖同時使用position和float。它沒有工作。 <clear>僅適用於浮動對象。理想情況下（假設存在這樣的bugaboo），我想要一個ignore-float:true類型的解決方案，或任何可笑的複雜折衷。這可能嗎？

來源

2017-09-05 JBH

就我所知，根據HTML標記的當前順序，您所要查找的內容是不可能的。如果添加另一個包裹在圖像和表格周圍的div，並且浮動div本身，表格將保留在圖像下方，其他元素將環繞它們。

<h1>Header</h1> 
<div class="image-wrap"> 
    <img src="..." alt="" /> 
    <table> ... </table> 
</div> 
<p>Paragraph text</p>

，併爲你的CSS：

.image-wrap { float: left; max-width: 200px; } 
.image-wrap img { display: block; }

來源

2017-09-05 20:57:19 JDewitt

這是一個絕妙的主意，而不是創建一個「T」形物體環繞，它的（可以理解）想要的一切包裝矩形對象沿着最右邊緣。但是，它確實揭露了一個潛在的解決方案回到過去的美好時代（'89 -'94），我們HTML'ers使用「float」與一大堆透明和薄而寬變化的「div」塊來創建成形的（例如彎曲的）浮球。這是舊技術，但它可能是我唯一的解決方案 - 如果沒有這個想法，我甚至不會記得它。謝謝！ – JBH

嘿，很好，寫得很好的答案。 @JBH完美地說。卓見。 –

如何保留一個區塊而不是其他區塊來包裹浮動圖像？

回答

相關問題