圍繞浮動環繞非文本元素

我有一段液體佈局已經爲我工作了一段時間。我浮動<div>無論是向右或向左。一個div通常會有一個圖像和一個標題。圍繞浮動環繞非文本元素

文本項目正確包裹浮游物。然而，某些項目不會：<table><hr>將執行以下兩件事之一：要麼他們侵入浮動的div，要麼跳過浮動的div。

有沒有一種方法只使用css，以便諸如<hr>之類的項目的大小將變爲當前可用寬度，就像文本實體一樣？也就是說，如果文本當前正在環繞寬度爲40％的浮動寬度，並且寬度爲80％的寬度爲<hr>，則該<hr>將佔剩餘60％的80％，並在環繞文本中放置寬度爲48％的小時。

來源

2015-02-04 Sherwood Botsford

創建一個簡單的例子，並張貼在這裏，一定要包括你想要的行爲 – Huangism

的問題是，當您使用在width屬性的百分比，

百分比計算相對於生成框的containing block的的寬度。

如果要計算相對於浮動元素剩餘可用空間的百分比，則必須將元素封裝在佔用剩餘空間的包含塊中。

#wrapper { 
 
    overflow: hidden; /* Clear float */ 
 
} 
 
#float { 
 
    float: left; 
 
    width: 40%; 
 
    background: #f99; 
 
} 
 
#block { /* Containing block that fills remaing space */ 
 
    overflow: hidden; 
 
    background: #99f; 
 
} 
 
hr { 
 
    width: 80%; /* With respect to available space */ 
 
}

<div id="wrapper"> 
 
    <div id="float">Float</div> 
 
    <div id="block"> 
 
    <hr /> 
 
    </div> 
 
</div>

來源

2015-02-04 19:34:09 Oriol

有趣。如果我根本沒有設計出人物風格，那麼它的行爲就是我想要的。使用可用空間並正確包裝。它可以擴展到目前可用空間的100％。 –

如果我把width =％比可用空間小，例如40％，那麼它在可用空間中居中，但是使用當前容器寬度的40％。 –

你是對的。如果我把hr包裝如下：

***

它的工作原理。 –

圍繞浮動環繞非文本元素

回答

相關問題