我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在,我需要浮动一个div到另一个div的右下角与正常的文本包装,你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的,即使浮动没有底部值,但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位,但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计,但显然不是。如果没有人有建议,我将不得不把我的文本分解成单独的盒子,并手动对齐div,但这是相当不稳定的,我不想在每个需要它的页面上都这样做。
随着Flexbox的引入,这变得非常容易,不需要太多的黑客。align-self:子元素的flex-end将沿着交叉轴对齐。
.container {
display: flex;
}
.bottom {
align-self: flex-end;
}
<div class="container">
<div class="bottom">Bottom of the container</div>
</div>
输出:
.container {
显示:flex;
/*材质设计阴影*/
Box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
身高:100 px;
宽度:175 px;
填充:10 px;
背景:# fff;
字体类型:Roboto;
}
.bottom {
align-self: flex-end;
}
< div class = "容器" >
<div class="bottom">容器底部</div>
< / div >
浮动和绝对定位的组合对我来说很有用。我试图把消息的发送时间放在语音气泡的右下角。时间不应该与消息体重叠,除非真的有必要,否则它不会使气泡膨胀。
解决方案是这样的:
有两个跨度,文本完全相同;
一个漂浮着,但看不见;
另一个是绝对定位到角落;
不可见的浮动对象的目的是保证可见对象的空间。
.speech-bubble {
font-size: 16px;
max-width: 240px;
margin: 10px;
display: inline-block;
background-color: #ccc;
border-radius: 5px;
padding: 5px;
position: relative;
}
.inline-time {
float: right;
padding-left: 10px;
color: red;
}
.giant-text {
font-size: 36px;
}
.tremendous-giant-text {
font-size: 72px;
}
.absolute-time {
position: absolute;
color: green;
right: 5px;
bottom: 5px;
}
.hidden {
visibility: hidden;
}
<ul>
<li>
<span class='speech-bubble'>
This text is supposed to wrap the time <span> which always seats at the corner of this bubble.
<span class='inline-time'>13:55</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float.
<span class='inline-time'>13:55</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Easy, uh?
<span class='inline-time'>13:55</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Well, not <span class='giant-text'>THAT</span>
easy
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
<span class='tremendous-giant-text'>See?</span>
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
The problem is, we can't tell the span to float to right AND bottom...
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
We can combinate float and absolute: use floated span to reserve space (the bubble will be inflated if necessary) so that the absoluted span is safe to go.
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
<span class='tremendous-giant-text'>See?</span>
<span class='inline-time'>13:56</span>
<span class='absolute-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Make the floated span invisible.
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
<span class='tremendous-giant-text'>See?</span>
<span class='inline-time hidden'>13:56</span>
<span class='absolute-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
The giant text here is to simulate images which are common in a typical chat app.
<span class='tremendous-giant-text'>Done!</span>
<span class='inline-time hidden'>13:56</span>
<span class='absolute-time'>13:56</span>
</span>
</li>
</ul>
目前这是不可能的。有不同的方法来解决将内容对齐到底边(flex, grid, table, absolute)。然而,这些方法不尊重float,因此内容不会围绕这些元素流动。
如果有一天浏览器和csswg对浮动元素的定义达成一致,那么在css中浮动元素就有可能实现。
先进的资源:
https://drafts.csswg.org/css-page-floats/#float-property
https://github.com/w3c/csswg-drafts/issues/1251