HTML – 清除左边,但只到目前为止

概述我有一组div和一个图像,我试图格式化为： 首先尝试它很容易,我浮动图像和名称左,浮动后缀右和清除：右;标题. HTML： <div class='wrapper'> <img src='http://placehold.it/200x150?text=var+w%26h' class='image' /> <div class='name'></div> <div cla 我有一组div和一个图像,我试图格式化为：

首先尝试它很容易,我浮动图像和名称左,浮动后缀右和清除：右;标题.

HTML：

<div class='wrapper'>    <img src='http://placehold.it/200x150?text=var+w%26h' class='image' />    <div class='name'></div>    <div class='suffix'></div>    <div class='Title'></div>    <div class='notes'></div></div>

CSS：

.wrapper {    border:1px solID black;    overflow:auto;    padding:5px;    wIDth:500px;}.image{    float:left;    margin:0 5px 5px 0;}.name{    border:1px solID red;    float:left;}.suffix{    border:1px solID blue;    float:right;}.Title{    border:1px solID green;    clear:right;}

但是,我的所有字段都是可变的,可以是不同的大小,多行等.因此,标题上的清除可能是清除一个(甚至零)行后缀,但名称可以是3行：

我可以使用带溢出的内包装：隐藏;或溢出：auto;除了图片之外的一切,然后清楚：两者;标题,但后来我丢失了图像周围的笔记.

如何在所有部件上保持适当的流量？

小提琴：http://jsfiddle.net/trex005/j6v1kmdp/

解决方法 不要将div.notes放入div.inner_wrapper：

.wrapper {    border:1px solID black;    overflow:auto;    padding:5px;    wIDth:500px;}.inner_wrapper{    overflow:hidden;}.image{    float:left;    margin:0 5px 5px 0;}.name{    border:1px solID red;    float:left;}.suffix{    border:1px solID blue;    float:right;}.Title{    border:1px solID green;    clear:right;}.inner_wrapper .Title{    clear:both;}

<div class='wrapper'>    <img src='http://placehold.it/100x100?text=var+w%26h' class='image' />    <div class='inner_wrapper'>        <div class='name'>name<br />is<br />multiline</div>        <div class='suffix'>suffix</div>        <div class='Title'>Title</div>    </div>        <div class='notes'>notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes notes</div></div>

总结

以上是内存溢出为你收集整理的HTML – 清除左边,但只到目前为止全部内容，希望文章能够帮你解决HTML – 清除左边,但只到目前为止所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。