保持图标条向右浮动，并环绕文本。

Question

我在html/css中有一个小的标题栏，其中有几个图标浮动到右侧。我希望他们保持位置，并有标题(在左边)，只是包装在下面，如果面积太小的右侧。现在，我的html看起来是这样的(使用引导)：

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

所以我有个头-sm-8和头-sm-4。这将不能长期运行，因为在某些大小的column 4太小，所以我需要使正确的列与图标有一个固定的宽度(140 is，让我们说)。因此，如果在右边设置一个最小宽度，它就会在较小的尺寸上断裂。

我想知道的是，是否有一种方法，让标题在左边的col 8左右移动设置宽度按钮在右侧时，响应(我基本上希望按钮保持在相同的时间)。比如，如果右边的按钮是绝对位置的，而不是从流程中出来的，那么文本就会对它做出反应。

这是我在玩弄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;
}

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

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

Answer 1

您可以在不引导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

我希望这不是非法的堆叠溢出，以编辑答案，因为我需要的时间。

除了编码，让我们做一些数学。假设我们每个有3个图标(32x32)。因此，图标包装器的总宽度(32+32+32) 96px将为右侧的每个图标(12x3=36)添加很少的12px边缘，以求美观。现在包装器的宽度是96+36 = 132px。我们在400px宽度的设备上。我的图标包装器是(25%) 100px of 400px (设备宽度)，而您的包装器是125px。我是说OK浏览器图标包装器的最小宽度是100px，但是如果图标更大并且不适合100px，您可以根据需要增加这个宽度，在这种情况下，它会将100px增加到132px或任何。但我不想把这些图标打断到下一行。他们应该显示在他们原来的大小和风格(32x32)加上保证金。您可以打破左边的内容(文本)来环绕这些图标，但不要破坏图标本身。它们应该保持原来的尺寸。不管设备宽度是多少。浏览器，请不要缩小图标大小只是增加包装宽度。

而且你的125px比132px小。因此您的包装将中断，其图标之一将移动到下一行。直到你不得不去你的CSS和显式地写132px或任何在width。如果一个月后你的老板说，请放置40x40的图标，3个月之后……？

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

Answer 2

除非我完全误解你..。这里有一个简单的方法。CSS类太多了，所以我使用了自己的CSS类，但是你得到了这个概念。

<div class="top">
<div class="content1">
    <p>02 Development, LLC v. 607 South Park, LLC </p>
</div>
<div class="content2">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
</div>
    <div class="content3">
    <p>test 123345.</p>
    <h3>Nothing Here</h3>
    <p>cases</p>
</div>

演示：https://jsfiddle.net/norcaljohnny/ovo83p5k/