css - 使用float的3列布局，第三列的元素在中间列之上

Question

我有一个包含 3 列的布局。

列是使用 float 完成的。我希望第一列左对齐，中间列(按钮)居中对齐，最后一列右对齐。

我不使用 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

在您的原始问题中，您在 css 中有 l-fright，但它应该是 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>