html – 垂直对齐浮动图像右侧的文本,图像大小不同,响应迅速

发布时间：2020-12-14 21:16:02 所属栏目：资源来源：网络整理

导读：我想垂直对齐左侧浮动图像右侧的多行文本. 然而图像尺寸(高度和宽度)会有所不同,并且事先未知文本的长度也各不相同,通常包含多行解决方案需要响应以适应不同的屏幕尺寸解决方案不应涉及图像,div或其他任何内容的特定px宽度或高度尺寸我不想使用表格,因

我想垂直对齐左侧浮动图像右侧的多行文本.

然而

>图像尺寸(高度和宽度)会有所不同,并且事先未知
>文本的长度也各不相同,通常包含多行
>解决方案需要响应以适应不同的屏幕尺寸
>解决方案不应涉及图像,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,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,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,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;
}
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!