Question

如何在一行中对齐图像和两个跨度

        <img src="../images/profile/profile.png" class="img" />
        <span class="name">Firt Name</span>
        <span class="comment">
            This is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently this is end of count.
        </span>

小提琴http://fiddle.jshell.net/m3qyhoab/

我将图像和跨度显示属性更改为阻止等..但仍然无法正常工作

Answer 1

尝试使用表格：

<table>
        <tr>
            <td><img src="http://i450.photobucket.com/albums/qq229/veraqueen/80X80-1.jpg" class="img" /></td>
            <td><span class="name">Firt Name</span></td>
            <td> <span class="comment">
                This is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently this is end of count.
            </span></td>
        </tr>
</table>

Answer 2

不确定是否是您期望的行为但是......试试这个：

http://fiddle.jshell.net/m3qyhoab/23/

enter image description here

Answer 3

<强> CSS

.wrapper {
    max-width:800px;
    margin:30px auto;
    background-color:#ccc;
    display:inline-block;
}
.img {
    width:80px;
    float:left;
    margin-right:15px
}
.name {
    float:left;
    width:80px;
}
.comment {
    float:left;
    width:600px;
}

DEMO

让你的工作正常你需要使用Float
将宽度硬编码到每个类

Answer 4

如果您希望图像占据垂直空间并保持名称和注释与其右侧对齐。您可以考虑执行this。

避免使用<table>。对于更结构化的解决方案，您可以使用bootstrap

干杯！

Answer 5

Fidler

.wrapper {
    max-width:800px;
    margin:30px auto;
    background-color:#ccc;
}
.img {
    width:80px;
    float:left;
    margin-right:15px
}
.name {
    float:left;
    width:100px;
}
.comment {
    float:left;
    width:605px;
}

我提到的：

你忘了用css关闭css;
您将相对大小（以％为单位）与绝对像素混合。
实施我的代码，它会正常工作。

P.S。如果没有在一行中显示，请不要忘记将“结果”窗口移动到左侧。

将图片和评论对齐在youtube评论部分，以获取响应式网站

5 个答案: