Html span和div一起向左浮动并不是我想要的方式_Html_Css

Html span和div一起向左浮动并不是我想要的方式

html css

Html span和div一起向左浮动并不是我想要的方式,html,css,Html,Css,所以我正在制作一个即将发布的模板，我试图用我的代码实现的就是这张照片但是我在代码中得到的是我的HTML代码和CSS代码如下所示： .days{ 字号：180px；字体系列：“奥斯瓦尔德”；颜色：#fff；字号：500；文本转换：大写；浮动：左； } .smalltext{ 字体大小：25px；字体系列：“奥斯瓦尔德”；字母间距：10px；颜色：#fff；文本转换：大写；浮动：左； } 天简单：完全删除浮动我相信你有点想得太多了float专门告诉元素将自身定

所以我正在制作一个即将发布的模板，我试图用我的代码实现的就是这张照片

但是我在代码中得到的是

我的HTML代码和CSS代码如下所示：

.days{
字号：180px；
字体系列：“奥斯瓦尔德”；
颜色：#fff；
字号：500；
文本转换：大写；
浮动：左；
}
.smalltext{
字体大小：25px；
字体系列：“奥斯瓦尔德”；
字母间距：10px；
颜色：#fff；
文本转换：大写；
浮动：左；
}

天

简单：完全删除

浮动
我相信你有点想得太多了float
专门告诉元素将自身定位在相邻位置，而您想要的外观似乎正好相反
除非另有指示，否则像
这样的块元素将自然地显示在彼此的顶部并左对齐，因此通过移除浮动：左从这两个元素中，您应该能够实现所需的外观
另外，为了满足我自己的好奇心。。。我假设您使用和列表元素（似乎不是任何类型的列表）是有原因的。
您可以使用left margin to days类，或者您不需要使用float left，只需使用div和margin to days div即可。
使用float可能不是一个好主意
但是，对您的问题的经典答案是在第二个元素上使用清除：

.days{
字号：180px；
浮动：左；
清除：左；
}
.smalltext{
字体大小：25px；
浮动：左；
}
天
135  只需考虑使用“div”元素来包装和对齐文本：
HTML
很高兴它有帮助！
<html>
  <body>
    <div class="wrapper1">Days</div>
    <div class="wrapper2">136</div>
  </body>
</html>

.wrapper1 {
  position:    relative;
  width:       100%;
  text-align:  left;
  font-size:   25px;
  font-family: Oswald;
}

.wrapper2 {
  position:    relative;
  width:       100%;
  text-align:  left;
  font-size:   180px;
  font-family: Oswald;
}

.wrapper2 p {
  letter-spacing: 10px;
}