宽度为100％的浮点内容

-3

我在尝试将所有内容对齐到左侧，但效果不佳。这是我的代码：宽度为100％的浮点内容

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

可能吗？

来源

2016-06-29 Jerson

不知道我理解。你提供的代码给出了你的目标的结果：S是你所指的'示例'栏中的小蓝线吗？ – Thomh

感谢您的回复。在我的例子（代码）中，蓝色的细线低于红色的网格，我不想那样。 – Jerson

只是调整了我的例子。此外，你使用内联CSS而不是夹在样式表中的任何原因？ – Thomh

这是你找什么？

移动以下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>

来源

2016-06-29 20:55:49 LGSon

谢谢你，作品像一个魅力。 :) – Jerson

你有margin-left：250px;在第一个吧..你不能用所有酒吧的相同风格做到这一点？此代码将被动态创建。旁边的红色矩形可以有两个酒吧（margin-left：250px）..你明白吗？该代码不适用于所有情况。 – Jerson

@Jerson当你问一个问题时，你需要发布可能的场景，否则没有答案会涉及到，其次，我们不能涵盖问题的所有方面，但我们可以展示如何解决问题，之后它是由你自己决定使用新的方法并在你自己的代码上实现它。我已经解决了你最初的问题，所以最合适的就是接受它，然后用扩展场景发布一个新问题，否则这里给出的所有答案都是无效的。 – LGSon

好吧试试这个..我已经把它们放到了两个容器中，叫做左边和右边。我已将它们设置为百分比宽度 - 更改这些以决定您希望它们占用多少宽度。您的问题是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/

来源

2016-06-29 20:23:52 Thomh

嗨，谢谢你的回复。看到我的图片，你会看到示例栏在红色矩形旁边 – Jerson

https://jsfiddle.net/kow1jxo3/2/工作不正常。 – Jerson

等待：S所以你想要更多的内容在它下面？如果你可以澄清你想要的内容如下，我很乐意添加必要的代码 – Thomh

宽度为100％的浮点内容

回答

相关问题