0 0 4 3 - 双列图文混排【终】

不二如是 · 发表于 2017-2-5 12:39:50

购买主题 已有 11 人购买 本主题需向作者支付 2 鱼币 才能浏览

shishunfu · 发表于 2017-4-28 17:47:45

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>section2</title>
        <style type="text/css">
                *{
                        margin: 0;
                        padding: 0;
                }
                section{
                        width: 98%;
                        margin-left: 1%;
                        background:#f5f5f5;
                        box-shadow: 0 0 1px rgba(0,0,0,.4) inset;
                        box-sizing: border-box;
                        padding: 33px;
                }
                section::after {
                        content: "";
                        display: table;
                        clear: both;
                }
                article{
                        width: 49%;
                        float: left;
                }
                article:first-child{
                        margin-right:2%;
                }
                h1{
                        font-size: 33px;
                        margin-bottom: 13px;
                        font-family:"NSimSun";
                }
                
                p{
                        font-size: 22px;
                        color: #F08;
                        font-family:"KaiTi"

                }
                h1,p{
                        width: 66%;
                        margin-left: 8%;
                }
                img{
                        margin-bottom: -39px;
                }
        </style>
</head>
<body>
<section>
        <article>
                <img src="http://xxx.fishc.com/forum/201703/13/141706pevgs8gk88l0jkks.png" alt="drumsticl_1">
                <h1>蓝鸡腿</h1>
                <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
        </article>
        <article>
                <img src="http://xxx.fishc.com/forum/201703/13/141707x807n8a8am79nm81.png" alt="drumsticl_2">
                <h1>红鸡腿</h1>
                <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。驱动力量是爱，好好学就会帮到更多的人。</p>
        </article>
</section>
</body>
</html>

aswyamato1989 · 发表于 2017-7-25 02:05:17

交作业！

你在意在便在 · 发表于 2019-11-1 10:57:01

come on~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* * {
margin: 0;
padding: 0;
} */
section {
        /* width: 1000px;
        background: #95a5a6;
        text-shadow: 0,0,1px,rgb(0, 0, 0,.4) inset; */
        box-sizing: border-box;
        padding: 33px;
}
article {
        width: 49%;
        float:left;
        position:relative;
}
img {
        position:absolute;
        top:25px;
        left:170px;
}
article:first-child {
        margin-right: 2%;
}

h1 {
        font-size:33px;
        margin-bottom:13px;
        font-family:"NSimSun";
}

p {
        font-size:22px;
        color:sandybrown;
        font-family:"KaiTi";
}
h1,p {
        width:66%;
        margin-left:33%;
}

        /* 清除浮动 */
/* section::after{
                        content: "";
                        display: table;
                        clear: both;
                } */
       
</style>
</head>
<body>
<section>
        <article>
                <img src="1.jpg" alt="drumsticl_1">
                <h1>蓝鸡腿</h1>
                <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
        </article>
        <article>
                <img src="2.jpg" alt="drumsticl_2">
                <h1>红鸡腿</h1>
                <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。驱动力量是爱，好好学就会帮到更多的人。</p>
        </article>
</section>
</body>
</html>

suweixuan1998 · 发表于 2020-1-4 17:24:40

老师加油，我也加油。

<!doctype html>
<html>
                <head>
                                <meta charset="utf-8">
                                <title>双....双飞?</title>
                                <style type="text/css">
                                                *{
                                                                margin: 0;
                                                                padding: 0;
                                                                background:#f5f5f5; 
                                                }
                                article{
                                                
                                                float: left;
                                                width:49%;
                                                 position: relative;
                                }
                                
                                article:first-child{
                                                margin-right:2%;
                                }
                                
                                img{
                                                position: absolute;
                                                top: -20px;
                                                left: 96px;
                                                
                                
                                }
                                
                                section{
                                                box-sizing: border-box;
                                                padding: 33px;
                                }
                        /*        section::after{
                                                content:"";
                                                display: table;
                                                clear: both;
                                }*/
                                
                                h1{
                                                font-size: 33px;
                                                margin-bottom: 13px;
                                                font-family:"NSimSun";
                                
                                
                                }
                                p{
                                                font-size: 22px;
                                                color: #F08;
                                                font-family: "KaiTi"
                                                
                                
                                }
                                h1,p{
                                                width: 66%;
                                                margin-left: 20%;
                                
                                
                                }
                                
                                </style>
                </head>
                
                
                <body>
                                <section>
                                                <article>
                                                                <img src="蓝.png" alt="蓝鸡腿">
                                                                <h1>蓝鸡腿</h1>
                                                                <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
                                                </article>
                                                <article>
                                                                <img src="红.png" alt="红鸡腿">
                                                                <h1>红鸡腿</h1>
                                                                <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。“驱动力量是爱，好好学就会帮到更多的人。</p>
                                                </article>
                                </section>
                </body>

</html>

小脑斧 · 发表于 2020-3-14 22:13:11

红tea少年 · 发表于 2022-2-13 17:52:24

article元素是不是应该添加

 display:inline-block;

??
否则示例的两个块就不在一行了.

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57001 狗仔卡	发表于 2017-2-5 12:39:50 \| 显示全部楼层 \|阅读模式购买主题已有 11 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 36
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 4 3 - 双列图文混排【终】

本帖被以下淘专辑推荐:

点评