1 回答
I know that you want to adhere to your posted layout, but there are several problems I foresee.
First and foremost, you are creating a very strange structure by having the text Blah blah blah
and the code
block as siblings. I don't think your layout is even possible with this syntax.
The second problem is that the paragraph tag, p
, cannot contain block level elements. So you are severely limiting yourself to what content can be inside them when writing your pages.
I would change your structure to be something like this and then use floats to position.
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>
This allows you to position encapsulated blocks of html with float left/right. It also allows you to make use of block level elements in your description areas. In addition, I would probably go in and add classes and encapsulate the code tags in a parent div also. But I think the example is pretty straightforward.