我该如何达到这种拉面效果？

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%; 
}