如何解决css float:清除并浮动都不起作用
这是我的代码:
<div id="root">
<img src={clock} alt="clock" title="Fast and simple!" id="clockEslogan"/>
<p className="phrase">KNow developers for your proyects in no time</p>
<p className="buffer"></p>
<p className="phrase">Join open-source proyects in no time</p>
</div>
我遇到的问题是第一个和第二个短语,我试图打破两个元素的浮动,并具有以下内容:
我正在吃这些:
但是我不能,我一直在做明确的事情:浮动:无;用一个缓冲区并在两个对象上放一个类,但是您将它们与float效果粘在一起,这是我的CSS代码:
#clockEslogan {
width: 120px;
float: left;
margin-right: 15px;
}
.buffer {
clear: both;
float: none;
}
我在做错什么吗?
解决方法
我个人更喜欢将flexbox用于此类事情,但这是一个浮动解决方案。将它们包含在div中可以使它更加整洁,您可以对其应用额外的样式,然后让段落作为块元素来完成它们的工作。但是,如果不将浮动元素的宽度设置为占用更多空间,它们将希望彼此相邻放置。
#clockEslogan {
width: 120px;
float: left;
margin-right: 15px;
background:#ccc;
padding:20px;
}
#phrase {
/*No floats here*/
}
/*set a width here if you need to */
#phrase-container {
float:left;
}
#buffer {
clear:both;
}
<div id="clockEslogan">
[Pretend I'm an Image]
</div>
<div id="phrase-container">
<p class="phrase">Know helpers for your project in no time</p>
<p class="phrase">Join open-source projects in no time</p>
</div>
<div id="buffer"></div>
<div>More content to demonstrate the flow;</div>
,
不确定这个问题。但是,让我们尝试一下。
因此,您想将两段分开吗?您的段落似乎可能带有RichTooltip
。因此,从CSS中删除您的display: inline-block;
类并添加它。
buffer
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。