Question

我有这个结果：

<div class="news" id="1" style="width: 350px; height: 100px;">
  <p style="float: left;"><img src="images/news.png" width="60" height="60" style="" /></p>
  <p style="margin-left: 10px;"><span id="newsdate" style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333;">Posted at 5:12 PM, 17/4/2014</span><br>
  <span style="text-align: justify; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333;">my text here blab lab la wiiihaaaaa why isn't margin coming?</span></p>
</div>

http://jsfiddle.net/YEwUZ/494/

为什么不margin-left处理文本？我想在图像和文本之间添加margin。

Answer 1

男人，内联造型 - 认真吗？

将您的代码更改为此代码，然后才能正常工作

<div class="news" id="1" style="width: 350px; height: 100px;">
                        <img src="images/news.png" width="60" height="60" style="float: left; margin-right: 10px;" />
                        <p style="margin-left: 10px;"><span id="newsdate" style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333;">Posted at 5:12 PM, 17/4/2014</span><br>
                        <span style="text-align: justify; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333;">my text here blab lab la wiiihaaaaa why isn't margin coming?</span></p>
                </div>

FIDDLE

Answer 2

如果两个元素都没有应用浮点数，则边距位于容器的侧面而不是下一个元素。

您有两种选择：

如@ web-tiki
添加一个浮动：左;到段落元素。

附注中您可能会发现除非您增加容器的大小，否则段落将包装在图像下方。

工作小提琴： FIDDLE

<div class="news" id="1" style="width: 400px; height: 100px;">
    <p style="float: left;"><img src="images/news.png" width="60" height="60" style="" /></p>
    <p style="margin-left: 10px; float:left"><span id="newsdate" style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333;">Posted at 5:12 PM, 17/4/2014</span><br>
        <span style="text-align: justify; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333;">my text here blab lab la wiiihaaaaa why isn't margin coming?</span>
    </p>
</div>

Answer 3

如果你真的想在这里使用内联样式： http://jsfiddle.net/YEwUZ/502/

但是如果你想正确地做这就是代码：

<强> HTML：

<div class="news" id="1" style="">
    <p class="image">
        <img src="images/news.png" width="60" height="60" />
    </p>

    <p>
    <span class="newsdate">Posted at 5:12 PM, 17/4/2014</span><br>
    <span class="content">my text here blab lab la wiiihaaaaa why isn't margin coming?</span>
    </p>

</div>

<强> CSS：

.news {width: 350px; height: 100px;}

.news .newsdate {font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333;}

.news .content {text-align: justify; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333;}

.news .image {float:left;margin-right:10px;}

太干净了！ DEMO

您也可以使用+ Selector：

http://jsfiddle.net/YEwUZ/507/

图像边距旁边的文字

3 个答案: