保持图标栏向右浮动并环绕文本

Posted 2023-03-05

【中文标题】保持图标栏向右浮动并环绕文本

【英文标题】：Keep icon bar floated right and wrap text around

【发布时间】：2017-01-02 08:33:18

【问题描述】：

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

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

我想知道的是，有没有办法让 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/

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

【问题讨论】：

Bootstrap 未加载到您的小提琴中。

@Valius79 已更新，谢谢。

你能告诉我它是页脚还是页眉的目的是什么？你写的整个风格都被覆盖在你的 css 中的几乎所有风格搞砸了

@Aravind 两者都不是，它是一个自定义反应组件，顶部有一个小菜单和标题，而不是真正的标题。如果您查看演示并将其拖动到小尺寸，您会注意到按钮变得未对齐并位于文本下方，我试图将它们保持在相同的位置并在它们周围放置文本形式。风格有点疯狂，它是一个使用一堆 BEM 的企业项目，我只是想修复其他人的工作:)。

【参考方案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 的设备。我的图标包装是400px（设备宽度）的（25%）100px，你的包装是125px。我说好的浏览器图标包装器的最小宽度是100px，但是如果图标更大并且不适合100px，您可以根据需要增加此宽度，在这种情况下它将增加100px 到132px 或任何。但我不想将这些图标分解到下一行。它们应该以其原始大小和样式 (32x32) 加上边距显示。您可以破坏左侧内容（文本）以环绕这些图标，但不要破坏图标本身。他们应该保持原来的大小。无论设备宽度是多少。浏览器，请不要减小图标大小，只是增加包装宽度。

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

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

【讨论】：

% with on the icon (right) bar 将不起作用，因为它在较小的屏幕上太小了。正如问题中提到的，我可能需要一个最小宽度，但它会破坏这个 Css 逻辑

@ajmajmajma 你的问题很有趣 :) 自从你发布以来我一直在努力。是的，但我认为没有其他方法。

我想出了一种方法 - 检查我对问题的编辑，但如果你有更好的方法，我很乐意看到它！

感谢您的编辑 :) 只有我的解决方案和您的编辑的主要区别是我以 % 为单位提供宽度，而您为图标栏提供固定宽度并将左侧元素拉出 DOM。

看看 - jsfiddle.net/DTcHh/24114 。将它从全尺寸拖到小尺寸。图标栏保持在右侧，保持所需的大小，左侧文本不会在上方或下方中断，这是预期的行为。如果我要添加更多图标，我可能需要添加多于 125 个，但它需要是静态大小，因此它不会中断，因此 % 不适用于这种情况。也许如果你做了 % 和一个最小宽度，但这仍然会破坏标题，因为它会期望，比如说 75%，而 125px 的 min 在非常小的尺寸上超过 25%。

【参考方案2】：

除非我完全误解了你.. 这是一个简单的方法。太多的 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/

【讨论】：

所以您的解决方案和我的解决方案之间的区别在于您放置填充的位置（在左侧“标题”部分而不是外部位），并且您使用 % 作为右侧填充，并且您使用fixed 与 absolute。 % 将不起作用，如果您将屏幕拖动到 200 像素宽，您将因此看到重叠。固定与绝对是一回事，两者都将 div 从 dom 流中取出。

您的包装没有按照您所说的那样包装。你的是 2 列。在这方面，您所要做的就是减小字体大小。我不明白为什么要降到200px。周围是否有手机或设备需要它缩放到那个尺寸？

在这种情况下，根据要求无法更改字体大小。它可以变得更小，它不会填满整个屏幕，所以即使在桌面上你也可以变得那么小。我的解决方案没有将文本包裹在它下面，但它会停止重叠并保持文本和图标栏的大小正确。