I wonder if there is a pure elegant css solution to get a text next to a float element going under it when its height is higher than the float element BUT ALSO be centered when its height is lower than the float element. The 2 next images present what I want to obtain :
这两种情况都有一个编码版本:
.float {
float: right;
height: 80px;
width: 500px;
background-color: blue;
}
#with_text_centered {
height: 80px;
position: relative;
}
#with_text_centered p {
position: relative;
top: 50%;
transform: translate(0, -50%);
}<h1>WITH TEXT UNDER THE FLOAT</h1>
<div class=ctn>
<div class=float></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<h1>WITH TEXT CENTERED</h1>
<div id="with_text_centered">
<div class=float></div>
<p>Lorem ipsum.</p>
</div>我可以单独这样做，但找不到一种方法来同时做这两件事(出于响应设计的目的).我目前找到的唯一解决方案需要js(使用ResizeWatch)，在这种情况下必须使用一些js看起来很简单，这对我来说很奇怪.
此外，我当然不希望在任何地方都很难定义身高.在我的例子中，不幸的是我将高度定义为80px.事实上，在我使用js的版本中，当文本低于Float元素时，我会切换到FlexBox.像这样将文本居中更容易、更优雅.当我这样做时，浮点被忽略(Flex被设置为忽略浮点).