向左清除，但只到目前为止

Question

我有一组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行：< / p>

我可以在除了图片之外的所有内容上使用overflow:hidden;或overflow:auto;的内包装，然后使用clear:both;标题，但之后我会丢失图像周围的笔记。

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

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

Answer 1

不要将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>

Answer 2

还有其他工具可以帮助您，例如弹性框或绝对定位。我认为你也可以通过浮点数实现你想要的，但除非元素的语义顺序是关键的，否则我会在suffix内移动name，在标记中的实际名称之前，并使用以下样式：

.wrapper {
    border: 1px solid;
    overflow: auto;
    padding: 5px;
    width: 500px;
}

.wrapper .image {
    float: left;
    margin-right: 5px;
}

.wrapper .suffix {
    float: right;
}

.wrapper .title {
    clear: right;
}

http://jsfiddle.net/helmers/07hh2ft1/1/