常用布局：左侧一栏为标题，右侧一栏为内容，右侧的内容可以增加，不会向左偏移。 cake-详情页-口味布局

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mcake-详情页-口味布局</title>
    <style type="text/css">

        *{margin: 0; padding: 0;}
        .clearfix:after {
          clear: both;
          content: ".";
          display: block;
          height: 0;
          visibility: hidden;
        }
        .box{width: 500px; border: red 1px solid; margin: 0 auto; padding: 20px;}
        .box .f-left{float: left; display: block; width: 100px;}
        .box .f-right{ display: block; margin-left:100px; *margin-left:107px;}
        .box p{margin: 10px 0;}
    </style>
</head>
<body>
    <div class="box clearfix">
        <p>
            <span class="f-left">口感：</span>
            <span class="f-right">是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰</span>
        </p>
        <p>
            <span class="f-left">口味:</span>
            <span class="f-right">是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰</span>
        </p>
        <div>
            <span class="f-left">口味基底：</span>
            <span class="f-right">是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰是垃圾福利圣诞节放老家收到了收代理费教练说的交房了是杜绝浪费就送董老赴京了时代峻峰</span>
        </div>
    </div>
</body>
</html>

 

 

posted @ 2020-01-16 16:46  Shimily  阅读(255)  评论(0)    收藏  举报