我想将多行文本垂直对齐到左浮动图像的右侧。
但是
- 图像大小(高度和宽度)会有所不同,并且事先未知
- 文本的长度也各不相同,通常会包含多行
- 解决方案需要响应迅速以适应不同的屏幕尺寸
- 解决方案不应涉及图像、div 或其他任何内容的特定 px 宽度或高度尺寸
- 我不想使用表格,因为在某些情况下,当图片旁边没有足够的空间容纳文本时,文本需要放在图片下方
我回顾了之前的问题,但没有什么与我正在寻找的完全匹配。它需要在任何设备上工作,所以我不能对任何维度使用绝对 px 值。
我应该如何设置以下样式来实现这一点?
<img src="image.jpg" >
<p>Here is the text that should go to the right of the image</p>
感谢您的帮助。
最佳答案
这将帮助您入门:jsFiddle example - 在下面寻找更好的方法。
基本上,vertical-align:middle
和 display:inline-block
用于 p
和 img
用于居中的元素。
HTML
<div class="element">
<img src="http://placehold.it/150x150"/>
<p>Lorem Ipsum is simply dummy text </p>
</div>
CSS
.element {
background:rgb(134, 226, 255);
margin:10px;
}
p {
display:inline-block;
margin:0px;
width:70%;
background:white;
vertical-align:middle;
}
img {
display:inline-block;
vertical-align:middle;
}
这是使用 display:table
/display:table-cell
相同 HTML 的更好方法..
jsFiddle example - 半响应... Other jsFiddle example - 响应式 img
元素..
CSS
.element {
width:100%;
display:table;
background:rgb(134, 226, 255);
margin:10px 0px;
padding:10px;
}
p {
display:table-cell;
height:100%;
vertical-align:middle;
background:white;
}
img {
display:table-cell;
width:100%;
height:auto;
}
另一个使用媒体查询的更新
您显然可以使用任何您想要的断点。我使用 480px,因为这只是为了举例。尝试调整窗口大小。 jsFiddle example
CSS
@media only screen and (min-width: 480px) {
.element {
width:100%;
display:table;
background:rgb(134, 226, 255);
margin:10px 0px;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
p {
display:table-cell;
height:100%;
vertical-align:middle;
background:white;
}
img {
display:table-cell;
width:100%;
height:auto;
}
}
@media only screen and (max-width: 479px) {
.element {
width:100%;
background:rgb(134, 226, 255);
margin:10px 0px;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
p {
background:white;
}
img {
width:50%;
margin:0px auto;
display:block;
height:auto;
}
}
关于html - 垂直对齐 float 图像右侧的文本,图像大小可变,响应式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19941804/