更新：
1）我放置了包含<br>的真实文本。
2）我把display：table放到了第一个.geenz并且它变得更好但3d段缩小了，但我没有看到它的任何原因并且希望它将占用100％的页面宽度但是并且＃39;不知道如何。
我知道这个问题很简单，而且来自HTML基础知识，但我真的无法自己解决。我希望.fr div在.greenz div上浮动，但它们只是一个在另一个之上。 Clear除了帮助我之外，最好的方法是什么，除了将固定宽度设置为.greenz以避免它？
.main_cont {width:100%;}
.wrapper {width:800px; margin: 0 auto; border:1px solid gold; padding:5px;}
.fr {float:right;}
.greenz {background-color:#CFC; border: 1px dotted green;}<div class="main_cont">
<div class="wrapper">
<div class="fr"><iframe width="250" height="188" src="https://www.youtube.com/embed/0vsYAL1j6iE" frameborder="0" allowfullscreen></iframe></div>
<p>Был месяц май, были нежные сны уходящей весны,<br>
Резвился дождь в ожидании летнего зноя,<br>
Вечерний рай неустанно справлял день рожденья весны,<br>
Был месяц май, мы любили друг друга с тобой,<br>
Были я и ты, были я и ты,<br>
Было лето цвета морской волны.</p>
<div class="greenz" style="display:table;">А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.</div>
<p>Был месяц май, нас с тобою встречал у подъезда рассвет,<br>
Я был другим, улыбался во сне, как ребенок,<br>
Не исчезай, возвращаясь домой, говорила ты мне,<br>
Был месяц май, только время бежало вперед,<br>
Были я и ты, были я ты, было лето цвета морской волны.</p>
<div class="greenz">А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.</div>
<p>Был месяц май, были нежные сны уходящей весны,<br>
Резвился дождь в ожидании летнего зноя,<br>
Вечерний рай неустанно справлял день рожденье листвы,<br>
Был месяц май, мы любили друг друга с тобой,<br>
Были я и ты, были я ты,<br>
Было лето цвета морской волны.</p>
<div class="greenz">
А теперь все навсегда ушло, далеко ушло,<br>
Вот уже без нас вечерний час встречает улица,<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.<br>
А теперь все снегом замело, снегом замело,<br>
Лишь от майской сирени голова все кружится.
</div>
</div>
答案 0 :(得分：1)
将display:flex用于.greenz。
.greenz {background-color:#CFC; display:flex; border: 1px dotted green}
或者您可以使用display:table; 将在IE上运行
答案 1 :(得分：0)
只需将float:left添加到.greenz即可使用
.main_cont {width:100%;}
.wrapper {width:800px; margin: 0 auto; border:1px solid gold; padding:5px;}
.fr {float:right;}
.greenz {background-color:#CFC; border: 1px dotted green;float:left}<div class="main_cont">
<div class="wrapper">
<div class="fr"><iframe width="250" height="188" src="https://www.youtube.com/embed/0vsYAL1j6iE" frameborder="0" allowfullscreen></iframe></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus felis eget ante mollis molestie. Donec risus odio, porta ut aliquam id, lobortis ac leo. Cras eget pharetra lorem. Cras lacinia dui vel mi tincidunt facilisis. Aliquam efficitur massa at est ultricies, a blandit lacus vulputate. </p>
<p class="greenz">Morbi eu dolor id diam interdum tincidunt. In purus nulla, sollicitudin sit amet justo ut, auctor imperdiet magna. Mauris iaculis, ante ut congue pretium, erat ex aliquet erat, eget luctus erat diam eget diam. Aenean ultrices nec libero quis posuere. Vivamus porta massa et tellus tincidunt, a blandit purus imperdiet. Aenean imperdiet porta aliquam. Aenean mollis sem id arcu vehicula, nec commodo leo malesuada. Proin eget vulputate tellus. Praesent fermentum dapibus iaculis. Morbi ut augue at purus euismod finibus sed sed eros.</p>
<p>Sed tincidunt purus in ante vehicula gravida. Suspendisse semper augue nisl, id cursus urna posuere consequat. Ut sagittis ante lacinia odio porttitor consectetur. Pellentesque mollis a felis quis ullamcorper. Vivamus pellentesque ante sed mauris aliquet volutpat. Sed vitae convallis lacus. Curabitur eu convallis mauris. Morbi porttitor molestie nisi, convallis laoreet justo rhoncus in.</p>
<p>Nunc luctus risus id odio tristique, at varius tortor molestie. Mauris nec nisl eget leo lobortis gravida. Vivamus enim augue, porttitor et imperdiet sit amet, lobortis et ante. Sed vulputate volutpat turpis, eu pretium ex egestas quis. Aenean sagittis viverra lectus non sodales. Nam ipsum urna, tristique id nisi quis, vulputate fermentum felis. Curabitur vehicula sapien quis arcu placerat vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus magna a risus semper ornare. In hac habitasse platea dictumst.</p>
<p>Duis euismod, erat commodo auctor fringilla, nisl magna tempor lacus, quis venenatis dui massa id diam. Sed lorem odio, fringilla ut efficitur ut, malesuada vel ante. Proin scelerisque dui eu elit commodo accumsan. Aliquam ut tellus nec odio mollis vestibulum. Nam at ex nec arcu dictum iaculis in a lectus. Phasellus ullamcorper blandit sodales. Proin consequat, mi vel iaculis sagittis, lacus eros fringilla magna, in consectetur urna nisi eget elit. Praesent fringilla, neque a feugiat maximus, diam massa imperdiet ligula, quis molestie magna elit in ligula. Duis gravida ultrices consequat. Suspendisse porttitor, ante vitae sollicitudin rutrum, nisl ipsum vulputate dui, sit amet porta ligula ligula vitae nisl. </p>
</div>
</div>
答案 2 :(得分：-2)
您可以使用width:60%;
.greenz {background-color：#CFC;边框：1px点缀绿色;宽度：60％}