Css 将 2个 div 放到一行。

最新推荐文章于 2024-07-09 23:24:46 发布

原创最新推荐文章于 2024-07-09 23:24:46 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

新手入门专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在网页布局中使用inline-block和float两种方式来实现元素的定位与排列，详细阐述了如何通过设置display属性为inline-block和应用float属性（如float:right或float:left）来调整元素的位置，同时提供了相应的CSS代码示例和效果展示。

方法1：使用inline-block

display: inline-block;
vertical-align: top;

方法2：使用float

1. float: right;
1. float: left;

代码：

html

    <div class="pr-other-user_header-img"></div>
    <div class="pr-other-user__title">Anonymous User</div>

Css

<span style="white-space:pre"></span><pre name="code" class="css" style="font-size: 32px; font-weight: bold;">.pr-other-user_header-img{
  width: 26px;
  height: 30px;
  display: inline-block;
  background-image: url(blue_people.png) ;
  background-size: 26px 30px;
}


.pr-other-user__title{
  color: @pr-light-blue;
  font-size: 13px;
  font-weight: bold;
  display: inline-block;
  vertical-align: top;
}