Question

尝试将图片放在段落旁边，但似乎不起作用。

这就是我所拥有的：

<div class="dhn-info-div">
    <p>DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span></p>            
   <img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors">
   <div style="clear:both"></div>
</div>

和CSS：

.dhn-info-div {
    margin-top: 20px;
    background-color: #a20e45;
    width: 95%;
    display: inline-block;
}
.dhn-info-div p {
    padding: 20px 40px 20px 40px;
    color: white;
    font-size: 18px;
    line-height: 35px;
    word-spacing: 5px;
}
.dhn-info-div img {
    float: right;
}

图片必须位于文字的右侧。 div不应该是100％的大小。干杯

这就是我想要的样子：

http://i.stack.imgur.com/bPxbB.png

Answer 1

EXAMPLE

您需要为某些元素添加一些width，例如文本您的图片上也没有width或height。

我还在图片中添加了top:40px;，以便将其降低到文字的水平

Answer 2

根据您是要在图像周围包装文本还是包含2列，这里有两个解决方案：

如果要围绕图像包装文本，则需要在p标记内。 See example（我还在图片周围添加了10px填充）。
如果你想要2列，你需要定义两列的宽度，以便它们适合。我还在两者中添加了float: left;，并为图像添加了一些填充，使其看起来稍微好一些。 See example

Answer 3

您可以将<img>放在<p>顶部吗？这会解决它：

<div class="dhn-info-div">
    <p>
        <img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors" />
        DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span>

    </p>

    <div style="clear:both"></div>
</div>

Answer 4

编辑：现在响应！

我做了这个小提琴，检查http://jsfiddle.net/fYh7u/

你可以将文本包装在一个div中，而另一个div中的图像，在主div“dnh-info-div”中，在我的例子中我错过了“div”，在课程结束时，因为很明显。

HTML：

<div class="dhn-info">
<div class="dhn-text">
    <p>devonshire house network is a <span class="text-purple">people-focused</span> membership club for director-level <span class="text-purple">professionals</span> in leadership roles who have an <span class="text-purple">instinctive focus</span> on <span class="text-purple">the human side of enterprise.</span></p>
</div>
<div class="dhn-img">
    <img src="http://i.imgur.com/kzJiOjx.jpg" alt="" />
</div>

CSS：

.dhn-info {
    width: 100%;
    background-color: #a20e45;
    display: inline-block;
}
.dhn-info .dhn-text {
    width: 50%;
    height: auto;
    float: left;
    padding: 20px 10px 0px 35px;
}
.dhn-info .dhn-text p {
    font-family: arial;
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    text-transform: uppercase;
    word-spacing: 5px;
    margin: 0;
    padding: 0;
    display: block;
}
.dhn-info .dhn-img {
    width: 40%;
    height: 100%;
    float: right;
}

.dhn-info .dhn-text p > span.text-purple {
    color: #9b59b6;
}
.dhn-info .dhn-img img {
  display: block;
  height: auto;
  max-width: 100%;
}

将图像放在DIV中的文本旁边

4 个答案: