gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 04:05:22 25 4
gpt4 key购买 nike

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

这是我的:

<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

最佳答案

根据您是要将文本环绕在图像周围还是有 2 列,以下是两种解决方案:

  1. 如果您想将文本环绕在图像周围,它需要位于 p 标记内。 See example (我还在图像周围添加了 10 像素的填充)。

  2. 如果你想要 2 列,你需要定义两者的宽度,以便它们适合。我还向两者添加了 float: left; 并为图像添加了一些填充以使其成为看起来稍微好一点。 See example

关于css - 将图像放在 DIV 中的文本旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21461128/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com