围绕浮动环绕非文本元素

我有一段液体布局已经为我工作了一段时间。我浮动<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包装如下：

***

它的工作原理。 –

围绕浮动环绕非文本元素

回答

相关问题