Question

怎么用div或span做出这种效果？不用table

Answer 1

这是html代码：

<div id="all">
        <div class="img">
            <img src="" alt="图片">
        </div>
        <div class="word">
            <span>
                <h1>活动：亲子茶艺比赛</h1>
            </span>
            <p>在逆境中生存的喀布尔回顾招商银行发展历史寻找心灵慰藉……</p>
        </div>
        <div class="but">
            <button class="button">正在进行</button>
        </div>
    </div>

这是css代码：

#all{
            width:680px;
            height:230px;
            border:1px solid red;
        }
        .img{
            width:170px;
            height:140px;
            margin:10px 20px 20px 20px;
            float:left;
            overflow:hidden;
            border:1px solid blue;
        }
        .word{
            margin-right:10px;
        }
        .word p{
            font-size:22px;
        }
        .button{
            float:right;
            width:115px;
            height:35px;
            border-radius:18px;
            margin-right:30px;
            background:red;
            color:white;
        }