html – 在图像旁边的块中浮动的文本

发布时间：2020-12-14 22:25:57 所属栏目：资源来源：网络整理

导读：我想实现以下安置：两个不同的文本(块)浮动/内联在图像旁边。 (div内的所有内容)。我一直在尝试使用不同的显示设置(封锁文本等)，但仍然无法正常工作。 HTML： div class="res"img src="?php echo 'img/'.$row["sType"].'.png';?"/spanTITLEe/spanspanDesc

我想实现以下安置：

两个不同的文本(块)浮动/内联在图像旁边。 (div内的所有内容)。

我一直在尝试使用不同的显示设置(封锁文本等)，但仍然无法正常工作。

HTML：

<div class="res">
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/>
<span>TITLEe</span>
<span>Description</span>
</div>

CSS：

.res {

    height:60px;
    background-color:yellow;
    border-bottom:1px solid black;
    text-align:left;

}

.res img {

    margin-top:8.5px;
    margin-left:5px;
    display:inline
}

.res span {

    display:block;
}

解决方法

HTML：

<div class="content">
    <img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ alt="" >
    <h3>Title</h3>
    <p>Some Description</p>
</div>?

CSS：

.content {
    width: 400px;
    border: 4px solid red;
    padding: 20px;
    overflow: hidden;
}

.content img {
    margin-right: 15px;
    float: left;
}

（编辑：李大同）

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