Расположение 3 столбцов с использованием float, элемент третьего столбца находится над средним столбцом

Question

У меня есть макет с 3 столбцами.

Столбцы сделаны с помощью поплавков.Я хочу, чтобы первый столбец был выровнен по левому краю, средний столбец (кнопка) выровнен по центру, а последний столбец - по правому краю.

Я не использую flexbox, потому что мне нужноподдержка старых IE (9).

Проблема, которая у меня есть, заключается в том, что последний столбец находится над средним столбцом.

Вход в третий столбец, я хочу иметь «гибкий»ширина.

Один экран меньшего размера. Я хочу, чтобы средний столбец был скрыт.

.container {
margin: 1.5rem 0 0;
}

.l-left {

    float: left;
    width: 55%;

}
.l-middle {

    float: left;
    width: 10%;

}
.l-right {

    float: right;
    width: 35%;

}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container clearfix">
  <div class="l-left">
    <ul class="list-inline">
        <li class="list-inline-item">lorem ipsum</li>
        <li class="list-inline-item">lorem ipsum</li>
        <li class="list-inline-item">lorem ipsum</li>
        <li class="list-inline-item">lorem ipsum</li>
    </ul>
  </div>
  <div class="l-middle">
    <a class="btn btn-primary btn-lg btn-block">Add container Free</a>
  </div>
  <div class="l-right">
    <form action="/contact" method="post" >
      <input class="input" type="text" name="email">
    </form>
  </div>
</div>

Answer 1

В исходном вопросе у вас есть l-fright в css, но это должно было быть l-right. Кроме того, текст кнопки не всегда соответствует ширине 10%. Вы можете использовать либо маленький размер шрифта, либо меньше текста внутри этой кнопки, либо использовать word-break:break-word или white-space:unset, либо некоторую комбинацию между ними. Все зависит от того, как вы хотите, чтобы ваш макет был похож.

Вы говорите на «меньших» экранах, что хотите, чтобы средний столбец исчез. Используйте медиа-запросы для этого.

Я спрятал его с 500px вниз.

См. Фрагмент ниже или jsFiddle (где вы можете поиграть с размером экрана)

.l-left {
  float: left;
  width: 55%;
}

.l-middle {
  float: left;
  width: 10%;
}

.l-middle a {
  white-space: unset;
  font-size: 10px;
  padding: 3px;
}

.l-right {
  float: right;
  width: 35%;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

@media only screen and (max-width: 500px) {
  .l-middle {
    display: none;
  }
  .l-right {
    width: 45%;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container clearfix">
  <div class="l-left">
    <ul class="list-inline">
      <li class="list-inline-item">lorem ipsum</li>
      <li class="list-inline-item">lorem ipsum</li>
      <li class="list-inline-item">lorem ipsum</li>
      <li class="list-inline-item">lorem ipsum</li>
    </ul>
  </div>
  <div class="l-middle">
    <a class="btn btn-primary btn-lg btn-block">Add container Free</a>
  </div>
  <div class="l-right">
    <form action="/contact" method="post">
      <input class="input" type="text" name="email">
    </form>
  </div>
</div>