css布局，文字换行对齐问题

发布于
2017-09-22

更新于
2017-09-22

我想实现这种布局

图片描述

 <div class="rule">
   <h5><b class="tip">1</b>我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明</h5>
   <h5><b class="tip">2</b>我是活动说明我是活动说明我是</h5>
</div>

.rule{
  width:200px;
}

.rule h5{
    color: #326a9e;
    margin-bottom: 0.5em;
    font-size:14px;
}

.tip{
    background-color:#326a9e;
    border-radius: 100%;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    margin-right: 1px;
    width:16px;
    height:16px;
    font-weight: normal;
    text-align: center;
    vertical-align:middle;
}

尝试使用text-indent，但是效果不好。

html css

阅读 15.7k

7 个回答

得票最新

沫俱宏

7633

发布于
2017-09-22

✓ 已被采纳

这种布局的实现方式有很多种，下面来说一下常用的几种方式：

第一种：

1.父容器使用相对定位
2.左边的盒子使用绝对定位，定位的点在父容器的左上角
3.右边盒子的左边距是左边盒子的宽度

第二种

1.左边的盒子进行左浮动
2.右边盒子触发BFC，使其不与浮动盒子区域重叠

第三种

1.父容器设置为flex布局 display:flex
2.左边的文字不设置宽度
3.右边的盒子设置宽度 flex:1

以上三种方式是工作中最常用的三种方式，望采纳！
另外附上我的文章地址：http://www.qdfuns.com/notes/3...

陌路凡歌

7.9k21119

发布于
2017-09-22

更新于
2017-09-22

试试用flex吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .rule{
              width:200px;
            }
            .text{
                display: -webkit-flex;
                display: flex;
            }
            .rule h5{
                color: #326a9e;               
                font-size:14px;
                -webkit-flex: 1;
                flex: 1;
                line-height: 20px;
            }
        .tip{
            background-color:#326a9e;
            border-radius: 100%;
            color: #fff;
            font-size: 12px;
            display: inline-block;
            margin: 2px;
            width:16px;
            height:16px;
            font-weight: normal;
            text-align: center;           
            -webkit-flex:0 0 16px ;
            flex: 0 0 16px;           
        }
        </style>
    </head>
    <body>
         <div class="rule">
             <div class="text">
                 <b class="tip">1</b>
                 <h5>我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明</h5>
             </div>    
             <div class="text">
                 <b class="tip">2</b>
           <h5>我是活动说明我是活动说明我是</h5>
           </div>    
        </div>
    </body>
</html>

当然用原来的样式也可以，加个padding和负margin，简单解决

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .rule{
              width:200px;
            }
            
            .rule h5{
                color: #326a9e;
                margin-bottom: 0.5em;
                font-size:14px;
                line-height: 20px;
                padding-left: 16px;
            }
            
            .tip{
                background-color:#326a9e;
                border-radius: 100%;
                color: #fff;
                font-size: 12px;
                display: inline-block;
                margin-right: 2px;
                width:16px;
                height:16px;
                font-weight: normal;
                text-align: center;
                vertical-align:middle;
                line-height: 16px;
                margin-left: -16px;
            }
        </style>
    </head>
    <body>
         <div class="rule">
           <h5><b class="tip">1</b>我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明</h5>
           <h5><b class="tip">2</b>我是活动说明我是活动说明我是</h5>
        </div>
    </body>
</html>

程序媛花花

1.7k53756

发布于
2017-09-22

不修改结构，改变一下相对位置使用position
例子

redman9

390139

发布于
2017-09-22

.rule {
    padding-left: 20px;
}

.tip {
    float: left;
    margin-left: -20px;
}

0xE000

45233041

发布于
2017-09-22

这种结构使用

<ul>
<li></li>
</ul>

或

<ol>
<li></li>
</ol>

会更适合。

HEternally

89929

发布于
2017-09-22

更新于
2017-09-22

<div class="rule">
   <h5><b class="tip">1</b><span>我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明</span></h5>
   <h5><b class="tip">2</b><span>我是活动说明我是活动说明我是</span></h5>
</div>

.rule{
  width:200px;
}

.rule .tip{
    background-color:#326a9e;
    border-radius: 100%;
    color: #fff;
    font-size: 12px;
    display: inline-block;
        margin-left:6px;
    width:16px;
    height:16px;
    font-weight: normal;
    text-align: center;
    vertical-align:top;
}
.rule h5{
    color: #326a9e;
    margin-bottom: 0.5em;
    font-size:14px;
}
.rule h5 span {
    padding-left:5px;
}