宽度为 100% 的浮动内容答案

【问题标题】：Float content with width 100%宽度为 100% 的浮动内容
【发布时间】：2016-06-30 05:29:16
【问题描述】：

我正在尝试将所有内容对齐到左侧，但效果不佳。这是我的代码：

<div style="float: left; width: 250px; background-color: red;">
  asdfasdf
  <br>asdfasdf
  <br>asdfasdf
  <br>asdfasdf
  <br>asdfasdf
  <br>asdfasdf
  <br>
</div>
<div>
  <div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; width:600px;">
    <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 
    <span class="text-title-right">Example</span>
    <p style="color: #000000;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

  </div>
</div>

我这是什么（但以条形为例，宽度：100%）：

示例 1： 示例 2：

有可能吗？

【问题讨论】：

不确定我是否理解。您提供的代码在您的目标中给出了结果：S 您指的是“示例”栏中的那条蓝色小线吗？
感谢您的回复。在我的示例（代码）中，小蓝线位于红色矩形下方，我不希望这样。
刚刚调整了我的例子。另外，您有什么理由使用内联 CSS 而不是将它们放入样式表中？
你在问如何移动那个红色矩形下面黑条？？？您的问题在描述实际问题方面做得可怕。
一张图片可以说超过 100 个字。 i.imgur.com/IVbx5tj.png

标签： html css css-float

【解决方案1】：

这是你要找的吗？

将top-content-right移动到左侧浮动div下方，删除其width: 100%并添加margin-left: 250px，它将按预期工作

当您将一个元素浮动到左侧并希望另一个元素出现在其右侧时，右侧元素需要位于标记之后，并且左边距与浮动的宽度相匹配。

如果您想将一个元素浮动到右侧并希望另一个元素出现在其左侧，则左侧元素需要位于标记之后，并且右边距与浮动的宽度相匹配。

.top-content-right ~ .top-content-right {
  width: 100%;
  margin-left: 0 !important;
}

<div style="float: left; width: 250px; background-color: red; margin: 0 5px 5px 0;">
  asdfasdf<br>
  asdfasdf<br>
  asdfasdf<br>
  asdfasdf<br>
  asdfasdf<br>
  asdfasdf<br>
</div>
<div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; margin-left: 250px;">
  <span class="text-title-right">Example</span> 
</div>
<div>
  <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 
  <p style="color: #000000;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; margin-left: 250px;">
  <span class="text-title-right">Example</span> 
</div>
<div>
  <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 
  <p style="color: #000000;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

【讨论】：

你有margin-left: 250px;在第一个酒吧.. 你不能对所有酒吧都使用相同的风格吗？此代码将动态创建。在红色矩形旁边可以有两个条（margin-left：250px）..你明白吗？该代码不适用于所有场景。
@Jerson 当您提出问题时，您需要发布可能的场景，否则没有答案将涵盖该问题，其次，我们无法涵盖问题的所有方面，但我们可以展示如何克服一个问题，之后由您决定使用新的操作方法并在您自己的代码上实现它。我已经解决了您最初的问题，因此最合适的方式是接受它，然后在扩展场景中发布一个新问题，否则此处给出的所有答案都将无效。
@Jerson 谢谢。如果您在此处发布指向新问题的链接，我会看看...我认为它不能用 float 解决（除非您添加脚本）但它可能用 flex

【解决方案2】：

好的，试试这个。我已将它们放入名为 left 和 right 的两个容器 Div 中。我已将它们设置为百分比宽度 - 更改这些以决定您希望它们占据多少宽度。您的问题是 A. 示例栏没有浮动 B. 您正在使用定义的宽度，但示例栏有 5px 边框。

<div class="left" style="float: left; width: 40%;">
 <div style="float: left; width: 100%; background-color: red; margin: 0 5px 5px 0;">
            asdfasdf<br>
            asdfasdf<br>
            asdfasdf<br>
            asdfasdf<br>
            asdfasdf<br>
            asdfasdf<br>
        </div>
        </div>
        <div class="right" style="width:60%; float: right;">
<div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; width:100%;">
<span class="text-title-right">Example</span> 
</div></div>
        <div>


                <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 

                <p style="color: #000000;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>

            </div>

这是 JS 小提琴：https://jsfiddle.net/kow1jxo3/1/

【讨论】：

您好，感谢您的回复。查看我的图片，您会看到示例栏在红色矩形旁边
等等 :S 所以你想要下面的更多内容吗？如果你能澄清你希望它下面的内容看起来像什么，我很乐意添加必要的代码
您是否希望它下面的示例标题是全角的？如果是这样，您只需要为每次出现调整 div 的宽度 - 因为您使用的是内联 CSS，所以 CSS 规则正在与代码一起复制。
我只想重复代码，像这样：i.imgur.com/IVbx5tj.png
没问题，把下面两个div的宽度调到100%就行了。查看更新的小提琴