html - inside with automatic element clearing

Answer 1

投稿されたレイアウトに固執したいのは承知していますが、いくつかの問題が予想されます。

何よりもまず、テキストBlah blah blahとcodeブロックを兄弟として持つことで、非常に奇妙な構造を作成しています。この構文ではレイアウトが可能だとは思いません。

2 つ目の問題は、段落タグ に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 のブロックを左/右に float で配置できます。また、説明領域でブロック レベルの要素を使用することもできます。さらに、おそらくクラスを追加して、コードタグを親 div にもカプセル化します。しかし、例は非常に簡単だと思います。