Question

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

＆＃13;

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

＆＃13;

我这是什么（但是带有示例条，宽度：100％）：

例1： 的例2：

有可能吗？

Answer 1

好的尝试这个..我把它们分成左右两个容器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/

Answer 2

这是你要找的吗？

移动左侧浮动div下方的top-content-right，移除其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％

2 个答案: