3列布局使用浮动，第三列元素位于中间列之上

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

在最初的问题中，css中有l-fright，但它应该是l-right。此外，按钮的文本并不总是适合10%宽度。您可以使用较小的字体大小，也可以在该按钮内使用较少的文本，或者使用word-break:break-word或white-space:unset或两者之间的某种组合。这完全取决于你想要你的布局是什么样子。

你说在"较小"的屏幕上，你希望中间一列消失。为此使用媒体查询。

我把它藏在500像素以下。

请参阅下面的片段或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>