<code> inside <p> with automatic element clearing</p></code>

Question

我正在编写一个投资组合网站，我计划用附带的代码注释工作，类似于在这里完成的工作： http://jashkenas.github.com/docco/

我想使用与此类似的代码，因为它适用于我制作的CMS。

<p>
    Blah blah blah
    <code>
        Annotations
    </code>
</p>
<p>
    Another para
</p>
<p>
    Blah blah blah
    <code>
        Annotations
    </code>
</p>

这是我画的照片。请注意我想要实现的首选标记：

我一直无法通过添加clear来复制所显示的内容：两者都是我的浮动段落元素。有人可以帮助我创建这个布局，以便可以使用我所针对的标记来实现吗？

Answer 1

我知道你想坚持你发布的布局，但我预见会有几个问题。

首先，通过将文本Blah blah blah和code块作为兄弟姐妹来创建一个非常奇怪的结构。我不认为使用这种语法你的布局是可能的。

第二个问题是段落标记p不能包含块级元素。因此，在编写页面时，您严格限制自己内部可能包含的内容。

我会将你的结构更改为类似的东西，然后使用浮动来定位。

div.parent { overflow: auto; } /* self clearing parent div */
p.left { float: left; width: 30%; } 
code.right { float: right; width: 70%; } 

<div class="parent">
     <p class="left">
        Text
     </p>
     <code class="right">Code</code>
</div>

这允许您使用左/右浮动来定位封装的html块。它还允许您在描述区域中使用块级元素。另外，我可能会进入并添加类并将代码标记封装在父div中。但我认为这个例子很简单。