不二如是 发表于 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;??
否则示例的两个块就不在一行了.
页: [1]
查看完整版本: 0 0 4 3 - 双列图文混排【终】