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或两者之间的某种组合。这完全取决于您想要的布局外观。

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

我将其从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>

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

1 个答案: