7

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

然而

  • 图片尺寸（高和宽）会有所不同，提前未知
  • 文本的长度也不同，通常包含多行
  • 解决方案需要响应以适应不同的屏幕尺寸
  • 解决方案不应涉及图像、d​​iv 或其他任何东西的特定 px 宽度或高度尺寸
    • 我不想使用表格，因为在某些情况下，当图像旁边的文本没有足够的空间时，文本需要放在图像下方

我回顾了以前的问题，但没有什么完全符合我的要求。它需要在任何设备上工作，所以我不能对任何维度使用绝对 px 值。

我应该如何设计以下内容来实现这一目标？

<img src="image.jpg" >

<p>Here is the text that should go to the right of the image</p>

谢谢你的帮助。

4

1 回答 1

12

这将帮助您入门：jsFiddle 示例-在下面查找更好的方法。

基本上，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-cellSame HTML的更好方法。

jsFiddle 示例- 半响应式...其他 jsFiddle 示例- 响应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;
}

使用媒体查询的另一个更新

你显然可以使用你想要的任何断点。我使用 480 像素，因为这仅用于示例目的。尝试调整窗口大小。jsFiddle 示例

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;
}
}
于 2013-11-12T23:16:20.353 回答