Is it possible to align the bottom aligned floating div?

Question

I want to avoid using position: absolute;it because I want to keep the functionality where, when the parent container is compressed, the delimiters are arranged one after another, rather than overlapping.

#container {
    border:1px solid;
}

#left {
    float:left;
    width:100px;
    height:100px;
    background:red;
}

#right {
    float:right;
    background:blue;
}

ul {
    padding:0;
    margin:0;
}

ul li {
    float:right;
    margin-left:20px;
}

<div id="container">
    <div id="left">
    </div>
    <div id="right">
        <ul>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
        </ul>
    </div>
    <div style="clear:both;"></div>
</div>

Run codeHide result

Edit: I updated the sample code to look more like what actually looks like. Unfortunately, I do not work with a fixed width / height, although for this particular problem the red div may have a fixed width / height.

Updated script: http://jsfiddle.net/zdL60bLu/10/

, , div , , div, div, .

?

Answer 1

flexbox.

:

• div

• , div div

  , display:flex , . [ , float:left; float:right , , ]

  , float, clear vertical-align flex .

  (CSS-tricks)

Fiddle ( , )

#container {
  border: 1px solid;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
#left {
  width: 100px;
  height: 100px;
  background: red;
}
#right {
  float: right;
  /* redundant */
  background: blue;
  align-self: flex-end;
}
ul {
  padding: 0;
  margin: 0;
}
ul li {
  float: right;
  margin-left: 20px;
}

<div id="container">
  <div id="left">
  </div>
  <div id="right">
    <ul>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
    </ul>
  </div>
</div>

Hide result

Answer 2

, : ( 50px). (-50px). : http://jsfiddle.net/zdL60bLu/9/

:

#left {
    margin-bottom: -50px;
}
#right {
    margin-top: 50px;
}