如何使图像显示在 H1 标签内的堆叠文本旁边

Question

我试图让下面的图像显示在文本旁边。有了表格，这将非常容易。使用css的正确方法是什么？理想情况下，左侧的文本和右侧的图像以及垂直和水平文本位于 h1 或div 的一半。

这是我到目前为止所拥有的JSFiddle，下面是html和css。

.html：

<h1>
    <div class="title">
        SonoSmile
    </div>
    <div class="subtitle">
        4D Fetal Imaging
    </div>
    <div class="catchline">
        2D, 3D, and 4D Ultrasound
    </div>
        <img class="logo" src="images/james-michael-3d-ultrasound-smiling-at-25-weeks-pregnancy.jpg" width="250" alt="You don't need an excuse to be happy.">
</h1>

.css：

h1
{
    display:inline-block;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:bolder;
    border:thin;
    border-style:solid;
}

.title
{
    font-size:48px;
}
.subtitle
{
    font-size:30px;     
}
.catchline
{
    font-size:22px;
}

Answer 1

JSFIddle demo

.HTML

<div class="wrapper">
    <div class="text">
        <h1 class="title">SonoSmile</h1>
        <h2 class="font-size:30px;  ">4D Fetal Imaging</h2>
        <h3 class="catchline" >2D, 3D, and 4D Ultrasound</h3>
    </div>
    <img class="logo" src="http://sonosmile.com/images/james-michael-3d-ultrasound-smiling-at-25-weeks-pregnancy.jpg" width="250" alt="You don't need an excuse to be happy."/>
</div>

.CSS

.wrapper 
{
    display:inline-block;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:bolder;
    border:thin;
    border-style:solid;
    overflow:hidden;
} 
.title {
    font-size:48px;
}
.subtitle {
    font-size:30px;     
}
.catchline {
    font-size:22px;
}
.text {
    float:left;
    width:50%;
}
.wrapper img.logo {
    display:block;
    float:right;
    width:50%;
}

Answer 2

将

"img"标签移到"h1"块之外。

.logo{float:right; width:250px;}