Question

我希望两个容器彼此相邻。另一个将包含一个接一个的线性对齐的元素列表。另一个只包含一个按钮。

[[...] [...] [...]] [按钮]

我想让左侧容器响应，而按钮应该具有不变宽度。在所有情况下，它们必须保持在同一条线上，并且不允许按钮落在另一个元素下。

然而，我未能实现这一目标。我找到了很多关于如何做到这一点的例子，按钮就在另一边，但是这样做就好像让它变得更加棘手！

以下是HTML的外观示例：

<div class="left">
    <p>In case we are</p>
    <p>too long</p>
    <p>one will be removed due</p>
    <p>to overflow!</p>
</div>
<div class="right">
    <button>Submit</button>
</div>

还有一件事是我希望Button位于屏幕的右侧。不是这样，它只是第一个元素的扩展。意味着左边的班级将有左边距：0px;和类右边距 - 右：0px;右：0;。

我希望这不是重复，但我无法为我的案例找到一个有效的例子。但很多人都是这样做的。

修改
现在这里是我的.css代码，以防有人想看看我在那里搞砸了什么。

.right {
    position: absolute;
    margin-top: 2px;
    display: inline-block;
    margin-right: 3px;
    right: 0;
}
.left {
    margin-top: 2px;
    position: absolute;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid black;
    overflow: hidden;
}

但是，是的，即使元素在开始时找到正确的位置，在某些时候它们开始重叠，因为左元素内部的内容...

Answer 1

Flexbox可以做到这一点：

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  align-items: center;
}
.left {
  flex: 1;
  display: flex;
  padding: .25em
}
.left p {
  flex: 1;
  border: 1px solid grey
}
.right {
  flex: 0 0 auto;
  padding: 0 0.25em;
  border: 1px solid grey;
}

<div class="wrapper">
  <div class="left">
    <p>In case we are</p>
    <p>too long</p>
    <p>one will be removed due</p>
    <p>to overflow!</p>
  </div>
  <div class="right">
    <button>Submit</button>
  </div>
</div>

CSS响应旁边的非响应

1 个答案: