保证金 - 保持不行

Question

我仍然是css的初学者，我试图给我的段落和<h2>留下一些余地，但它不起作用。

我有一个700px的div，我想为我的<p>和<h2>提供与图像相关的10px左边距。

但是它不起作用，你能提供一些帮助吗？

我在尝试什么：

我的jsfiddle 有问题：

http://jsfiddle.net/2p9vw/5/

我的HTML

<div id="example">
    <img src="images/image3.jpg" width="226" height="129" />
    <h2>Example</h2>
    <p>text here  text here  text here  text here  text here  text here  text here  text here  text here  text here  </p>
</div>

我的css：

#example {width:690px; height:auto; font-size:16px; margin:15px 0 0 0;}
#example img{float:left;}
#example h2{float:right;margin-left:10px; font-size:16px; color:#444;}
#example p{ text-align:justify; margin-left:10px; }

Answer 1

  

我有一个700px的div，我想为我的<p>和<h2>提供与图像相关的10px左边距。

     

但它不起作用

工作 - 您只是看工作。

由于您的图像是浮动的，这意味着任何内联内容都会浮动它 - 但像p和h2这样的块元素仍然会超过完整宽度，在你的图像下面 - 这就是为什么你看不到该边缘的任何影响，因为它在图像的“下面”。

简单地为您的图片添加margin-right 10px。 http://jsfiddle.net/2p9vw/4/