我如何实现这种拉开式外观？

Question

我需要实现以下目标：

因为我使用CMS，我必须使用的结构是

<div class="outer">
<div class="ebrochure"><!--This is the box pulled off to the right, with "Ready to start .."--></div>
<h1><!--This is the "The Easiest Way to Make an Impact" header--></h1>
<h3><!--This is the "A Gift in Your Will or Living Trust" header--></h3>
<p><!--This is the "Interested in ..." paragraph--></p>
</div>

这看起来可以实现吗？如果是这样，怎么样？

Answer 1

我没有完整的答案，因为我现在必须离开，但这是一个开始和一些有用的资源

http://www.w3.org/wiki/Floats_and_clearing http://www.sitepoint.com/web-foundations/floating-clearing-css/

抱歉，我无法完成它！如果你没有得到更多的答案，请回复并告诉我，如果我在附近，我可以帮助你更多。

HTML：

<div class="outer">

    <div class="ebrochure">
      <div id="salepoint"><p>Ready to start..Aliquid dolores conclusionemque ei ius, dico cibo ut sea, maiorum fastidii consequuntur quo ex. Vix quas temporibus ex. Consulatu appellantur sea id, usu an sumo saperet lucilius. Mel atqui inani at, ea ius choro insolens convenire. Te usu pericula adversarium.Qui tale dolore dissentias cu. Libris moderatius te est. No nam audiam singulis sapientem, eum ei laoreet legendos delicatissimi. Mei atqui sensibus percipitur no. Sed et persius gloriatur inciderint, et sea mazim impetus.An duo posse numquam offendit, recteque efficiantur reprehendunt mea ex. Est discere volumus eu, illud conceptam mei ad. Suas liber complectitur ea sit. An populo facete laoreet quo, ad fabellas expetenda referrentur est. Augue cotidieque vel an. Vix aliquid vivendo liberavisse ut, etiam euripidis ius no. Ei audiam corpora eos. Nihil eirmod omnesque vis et. Ut vide mundi definitiones vix, voluptua constituto mel</p><!--This is the box pulled off to the right, with "Ready to start .."--></div>
    </div>

  <h1><b>The Easiest Way</b><br> <i>to Make an Impact</i><!--This is the "The Easiest Way to Make an Impact" header--></h1>
        <h3>A Gift in Your Will or Living Trust<!--This is the "A Gift in Your Will or Living Trust" header--></h3>
    <div id="about">
        <p>Interested in helping blah with our mission bu tfeel overwhelmed by the thought of writing another check or giving your assets today? orem ipsum dolor sit amet, est tation minimum delicata et, per an ridens eruditi. Conceptam dissentias mea an, eam at definiebas omittantur, vis id autem labores erroribus. Aliquid dolores conclusionemque ei ius, dico cibo ut sea, maiorum fastidii consequuntur quo ex. Vix quas temporibus ex. Consulatu appellantur sea id, usu an sumo saperet lucilius. Mel atqui inani at, ea ius choro insolens convenire. Te usu pericula adversarium.Qui tale dolore dissentias cu. Libris moderatius te est. No nam audiam singulis sapientem, eum ei laoreet legendos delicatissimi. Mei atqui sensibus percipitur no. Sed et persius gloriatur inciderint, et sea mazim impetus.An duo posse numquam offendit, recteque efficiantur reprehendunt mea ex. Est discere volumus eu, illud conceptam mei ad. Suas liber complectitur ea sit. An populo facete laoreet quo, ad fabellas expetenda referrentur est. Augue cotidieque vel an. Vix aliquid vivendo liberavisse ut, etiam euripidis ius no. Ei audiam corpora eos. Nihil eirmod omnesque vis et. Ut vide mundi definitiones vix, voluptua constituto mel <!--This is the "Interested in ..." paragraph--></p>
    </div>
</div>

CSS

   #salepoint {
   float: right;
  display: block;
  background: yellow;
  padding: 10px;
  width: 48%;
}

#about {
  float: left;
  display: block;
  background: green;
  padding: 10px;
  width: 48%;
}