image - 简单的 css 文本图像布局

Question

我无法将一些文本放在图像旁边。我在一个网站上工作：http: //puckpros.edkatzman.com/

但不是另一个： http: //petra.edkatzman.com/

我看不出有什么区别。另一双眼睛能帮上忙吗？

这是 jsfiddle：http: //jsfiddle.net/tangobango/rK2mG/

HTML：

    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">
            <div id="front-page">
                <div id="owner-photo ">
                    <img src="http://petra.edkatzman.com/wp-content/uploads/2013/01/Ed-headshot-small.jpg" alt="Ed Katzman" >
                </div>
                <div id="owner-description ">

                        <h1><span class="drop-cap">Hi! </span>My name is Michael Jennings, 
                        the owner and master craftsman of Petra Stoneworks. I have over 25 
                        years experience working with a wide range of both valuable and everyday stone pieces.</h1>

                    <h3>We specialize in the expert repair of stone objects and the creation 
                    of original pieces. Have a look at the portfolio of our work and contact 
                    us with any questions or to start a discussion of how we might help you.</h3>
                </div>
            </div>
        </div><!-- #content .site-content -->
    </div><!-- #primary .content-area -->

CSS：

#front-page {
    background-color:#ffffff;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top:10px;
    overflow: hidden;


}

#owner-photo {
    width:246px;
    height:246px;
    float:left;


}

Answer 1

感谢您包含 jsFiddle。这很有帮助。你的问题是一个简单的错字。

<div id="owner-photo ">

id 属性中有一个空格。删除该空间，div 应该浮动。

我不确定您的页面前景如何，但您可能希望将所有者照片 ID 移动到图像本身并从代码中删除可能不必要的 div。

Answer 2

区别在于：

首先，将 float:left 放入 id="owner-photo"

<div id="owner-photo " style="float: left;">
<img src="http://petra.edkatzman.com/wp-content/uploads/2013/01/Ed-headshot-small.jpg" alt="Ed Katzman">
</div>

第二：

我不知道为什么，但是不要使用 <-h1>，使用 <-p>。

在http://puckpros.edkatzman.com/的例子中

首先是：

<img class="left_image" src="http://puckpros.edkatzman.com/wp-content/themes/PuckPros/images/services.png">

接着：

<p>something</p>

这是结果：

希望能帮助到你 ：）