保持图标栏向右浮动并包裹文本

Question

我在html/css中有一个小标题栏,右边有几个图标浮动.我希望它们保持在原位并且如果右侧区域太小,则将标题(在左侧)包裹在下方.现在,我的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左侧的标题在响应时绕着右侧的设置宽度按钮移动(我基本上希望按钮保持在同一个位置全程).有点像右边的按钮是绝对位置但不是流出的,所以文本会对它作出反应.

这是一个小提琴我愚弄https://jsfiddle.net/DTcHh/24085/

编辑

因此,我通过以下操作即兴创建了一个解决方案: - 通过绝对定位并将其设置为一个集合,从dom流中取出正确的图标栏元素 - 向包含左侧和右侧的元素添加相同的宽度作为填充项目

然后,我可以一起消除col的全部.代码如下:

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;
}

看工作小提琴:https://jsfiddle.net/DTcHh/24114/

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

Answer 1

您可以在不使用 bootstrap 的情况下完成此操作col-*-*，并为两个 div 提供显式宽度，并为图标栏添加一些额外的样式。

\n\n

更新代码

\n\n

<div class="activity-panel-item--header">\n  <div class="pull-left" style="width: 75%;">\n    <p>02 Development, LLC v. 607 South Park, LLC </p>\n  </div>\n  <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>\n</div>\n

\n\n

jsFiddle

\n\n

编辑1

\n\n

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

\n\n

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

\n\n

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

\n\n

。

\n\n

编辑2

\n\n

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

\n\n

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

\n\n

而你的125px小于132px。因此，您的包装器将损坏，并且其图标之一将移动到下一行。直到你必须去你的 CSS 并明确地写132px或任何在width. 如果 1 个月后你的老板说请放置 40x40 的图标，3 个月后等等......？

\n\n

尝试一下，放置更大的图标，看看你的width: 125px.

\n