宽度为 100% 的浮动内容

Question

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

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

我这是什么（但是用例子吧，width:100%）：

示例 1： 示例 2：

可以吗？

Answer 1

好的，试试这个。我已经将它们放入两个名为 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 fiddle：https://jsfiddle.net/kow1jxo3/1/

Answer 2

这是你要找的吗？

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

宽度为 100% 的浮动内容

Float content with width 100%

html

css

css-float