html - 保持图标栏向右浮动并环绕文字

Question

我在 html/css 中有一个小标题栏，其中有几个图标 float 到右侧。如果右侧的区域太小，我希望它们保持原位并让标题(左侧)环绕在下方。现在，我的 html 看起来像这样(使用 Bootstrap ):

 <div class="activity-panel-item--header">
     <div class="col-sm-8"><p>02 Development, LLC v. 607 South Park, LLC </p></div>
     <div class="col-sm-4"><span class="icon icon-trash-o pull-right"></span><span class="icon icon-cog2 pull-right"></span><span class="icon icon-pencil3 pull-right"></span></div>
</div>

所以我有一个 col-sm-8 和 col-sm-4。这从长远来看是行不通的，因为 col-sm-4 在某些尺寸下太小了，所以我需要使带有图标的右列具有设定的宽度(可以说是 140px)。因此，如果在右侧设置最小宽度，它会在较小的尺寸上中断。

我想知道的是，有没有办法让 col-sm-8 左侧的标题在响应时在右侧的设置宽度按钮周围移动(我基本上希望按钮留在一直在同一个地方)。就像右边的按钮是绝对定位的，但没有在流程之外，所以文本会对其使用react。

这是我用来玩的 fiddle https://jsfiddle.net/DTcHh/24085/

编辑

所以我通过执行以下操作即兴解决了一个问题:- 通过绝对定位并给它一个集合，将正确的图标栏元素从 dom 流中取出- 将与填充相同的宽度添加到包裹左右元素的元素

然后我就可以把所有的列都去掉了。代码看起来像这样:

HTML:

  <div class="activity-panel-item col-md-12">
    <div class="activity-panel-item--header">

      <p>02 Development, LLC v. 607 South Park, LLC </p>
      <div class="activity-panel-item--header--iconbar">
        <span class="icon icon-trash-o pull-right">1</span><span class="icon icon-cog2 pull-right">2</span><span class="icon icon-pencil3 pull-right">3</span>
  </div>
    </div>
    <div class="activity-panel-item--body">
      <p>test 123345.</p>
      <h3></h3>
      <p>cases</p>
    </div>
  </div>

CSS:

.activity-panel-item {
  height: 100%;
  padding: 0;
}

.activity-panel-item--header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 12px 125px 12px 12px;
  min-height: 50px;
  background-color: rgba(0, 0, 0, 0.8);
}

.activity-panel-item--header p {
  color: #fff;
}

.activity-panel-item--header .icon {
  cursor: pointer;
  color: #fff;
  margin: 0px 12px;
  font-size: 20px;
}

.activity-panel-item--body {
  overflow-y: auto;
  padding: 10px 20px;
  display: block;
  width: 100%;
  height: 100%
}

.activity-title-input {
  width: 100%;
}

.activity-panel-item--header--iconbar {
  display: block;
  float: right;
  top: 10px;
  right: 10px;
  width: 125px;
  min-height: 50px;
  height: auto;
  position: absolute;
}

参见工作 fiddle :https://jsfiddle.net/DTcHh/24114/

任何和所有输入都会有所帮助，或者如果有人有不同的工作方法，那也很好。谢谢!

Answer 1

您可以在没有 Bootstrap col-*-* 的情况下完成此操作，并为两个 div 提供明确的宽度，并为您的图标栏添加一些额外的样式。

更新代码

<div class="activity-panel-item--header">
  <div class="pull-left" style="width: 75%;">
    <p>02 Development, LLC v. 607 South Park, LLC </p>
  </div>
  <div class="pull-right" style="position: absolute; right: 0px; min-width: 25%;"><span class="icon icon-trash-o pull-right">1</span><span class="icon icon-cog2 pull-right">2</span><span class="icon icon-pencil3 pull-right">3</span></div>
</div>

jsFiddle

编辑 1

如果你根据这个解决方案深入思考，我们都在同一点上。让我解释一下，我为图标栏提供了 25% 的最小宽度，为左侧元素提供了 75% 宽度。这意味着可以根据情况增加图标栏的宽度，但它必须至少为总屏幕或容器的 25%，并且左侧元素的宽度为 75% 可以视情况减少。

并且您为图标栏提供了宽度 125px 或任何宽度，这意味着它可以根据情况增加或减少，但原始宽度为 125px

这里的情况我指的是面积和屏幕分辨率。如果图标较大并且不适合 25% 那么这个宽度可以增加并且左边的元素可以减少 如果图标栏不适合 125px 那么这就是你编辑的情况宽度可以增加，因为我们没有提到图标栏的最大宽度或左侧元素的最小宽度。

.

编辑 2

我希望在 stackoverflow 上根据需要多次编辑答案并不违法。

除了编码之外，让我们做一些数学运算。假设我们有 3 个 (32x32) 的图标。所以图标包装器的总宽度将为 (32+32+32) 96px 添加少量 12px 到右侧的每个图标 (12x3=36) 以美观。现在包装宽度为 96+36 = 132px。我们在宽度为 400px 的设备上。我的图标包装器是 400px(设备宽度)的 (25%) 100px，而您的图标包装器是 125px。我是说 OK 浏览器图标包装器的最小宽度是 100px 但如果图标较大并且不适合 100px 您可以根据需要增加此宽度，在这种情况下它会将 100px 增加到 132px 或任何值。但我不想将这些图标分解到下一行。它们应以原始尺寸和样式 (32x32) 加上边距显示。您可以打断左侧内容(文本)以环绕这些图标，但不要打断图标本身。他们应该保持原来的大小。无论设备宽度是多少。浏览器，请不要减小图标大小，只增加包装宽度。

并且您的 125px 小于 132px。因此，您的包装器将中断，并且其图标之一将移至下一行。直到您必须使用 CSS 并明确编写 132px 或 width 中的任何内容。如果 1 个月后你的老板说请放置 40x40 的图标，3 个月后等等...？

尝试一下，放置更大的图标，看看您的 width: 125px 会发生什么。