设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 4 3 - 双列图文混排【终】
返回列表 发新帖
查看: 3131|回复: 7

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

[复制链接]
不二如是
发表于 2017-2-5 12:39:50 | 显示全部楼层 |阅读模式
购买主题 已有 11 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

shishunfu
发表于 2017-4-28 17:47:45 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>section2</title>
  6.         <style type="text/css">
  7.                 *{
  8.                         margin: 0;
  9.                         padding: 0;
  10.                 }
  11.                 section{
  12.                         width: 98%;
  13.                         margin-left: 1%;
  14.                         background:#f5f5f5;
  15.                         box-shadow: 0 0 1px rgba(0,0,0,.4) inset;
  16.                         box-sizing: border-box;
  17.                         padding: 33px;
  18.                 }
  19.                 section::after {
  20.                         content: "";
  21.                         display: table;
  22.                         clear: both;
  23.                 }
  24.                 article{
  25.                         width: 49%;
  26.                         float: left;
  27.                 }
  28.                 article:first-child{
  29.                         margin-right:2%;
  30.                 }
  31.                 h1{
  32.                         font-size: 33px;
  33.                         margin-bottom: 13px;
  34.                         font-family:"NSimSun";
  35.                 }
  36.                
  37.                 p{
  38.                         font-size: 22px;
  39.                         color: #F08;
  40.                         font-family:"KaiTi"

  42.                 }
  43.                 h1,p{
  44.                         width: 66%;
  45.                         margin-left: 8%;
  46.                 }
  47.                 img{
  48.                         margin-bottom: -39px;
  49.                 }
  50.         </style>
  51. </head>
  52. <body>
  53. <section>
  54.         <article>
  55.                 <img src="http://xxx.fishc.com/forum/201703/13/141706pevgs8gk88l0jkks.png" alt="drumsticl_1">
  56.                 <h1>蓝鸡腿</h1>
  57.                 <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
  58.         </article>
  59.         <article>
  60.                 <img src="http://xxx.fishc.com/forum/201703/13/141707x807n8a8am79nm81.png" alt="drumsticl_2">
  61.                 <h1>红鸡腿</h1>
  62.                 <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。驱动力量是爱，好好学就会帮到更多的人。</p>
  63.         </article>
  64. </section>
  65. </body>
  66. </html>
复制代码
0035section2.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-4-28 18:41
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-7-25 02:05:17 | 显示全部楼层
交作业！
043.jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 2019-11-1 10:57:01 | 显示全部楼层
come on~
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style type="text/css">
  7. /* * {
  8. margin: 0;
  9. padding: 0;
  10. } */
  11. section {
  12.         /* width: 1000px;
  13.         background: #95a5a6;
  14.         text-shadow: 0,0,1px,rgb(0, 0, 0,.4) inset; */
  15.         box-sizing: border-box;
  16.         padding: 33px;
  17. }
  18. article {
  19.         width: 49%;
  20.         float:left;
  21.         position:relative;
  22. }
  23. img {
  24.         position:absolute;
  25.         top:25px;
  26.         left:170px;
  27. }
  28. article:first-child {
  29.         margin-right: 2%;
  30. }

  32. h1 {
  33.         font-size:33px;
  34.         margin-bottom:13px;
  35.         font-family:"NSimSun";
  36. }

  38. p {
  39.         font-size:22px;
  40.         color:sandybrown;
  41.         font-family:"KaiTi";
  42. }
  43. h1,p {
  44.         width:66%;
  45.         margin-left:33%;
  46. }

  48.         /* 清除浮动 */
  49. /* section::after{
  50.                         content: "";
  51.                         display: table;
  52.                         clear: both;
  53.                 } */
  54.       
  55. </style>
  56. </head>
  57. <body>
  58. <section>
  59.         <article>
  60.                 <img src="1.jpg" alt="drumsticl_1">
  61.                 <h1>蓝鸡腿</h1>
  62.                 <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
  63.         </article>
  64.         <article>
  65.                 <img src="2.jpg" alt="drumsticl_2">
  66.                 <h1>红鸡腿</h1>
  67.                 <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。驱动力量是爱，好好学就会帮到更多的人。</p>
  68.         </article>
  69. </section>
  70. </body>
  71. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-4 17:24:40 | 显示全部楼层
老师加油，我也加油。
  1. <!doctype html>
  2. <html>
  3.                 <head>
  4.                                 <meta charset="utf-8">
  5.                                 <title>双....双飞?</title>
  6.                                 <style type="text/css">
  7.                                                 *{
  8.                                                                 margin: 0;
  9.                                                                 padding: 0;
  10.                                                                 background:#f5f5f5;
  11.                                                 }
  12.                                 article{
  13.                                                
  14.                                                 float: left;
  15.                                                 width:49%;
  16.                                                  position: relative;
  17.                                 }
  18.                                
  19.                                 article:first-child{
  20.                                                 margin-right:2%;
  21.                                 }
  22.                                
  23.                                 img{
  24.                                                 position: absolute;
  25.                                                 top: -20px;
  26.                                                 left: 96px;
  27.                                                
  28.                                
  29.                                 }
  30.                                
  31.                                 section{
  32.                                                 box-sizing: border-box;
  33.                                                 padding: 33px;
  34.                                 }
  35.                         /*        section::after{
  36.                                                 content:"";
  37.                                                 display: table;
  38.                                                 clear: both;
  39.                                 }*/
  40.                                
  41.                                 h1{
  42.                                                 font-size: 33px;
  43.                                                 margin-bottom: 13px;
  44.                                                 font-family:"NSimSun";
  45.                                
  46.                                
  47.                                 }
  48.                                 p{
  49.                                                 font-size: 22px;
  50.                                                 color: #F08;
  51.                                                 font-family: "KaiTi"
  52.                                                
  53.                                
  54.                                 }
  55.                                 h1,p{
  56.                                                 width: 66%;
  57.                                                 margin-left: 20%;
  58.                                
  59.                                
  60.                                 }
  61.                                
  62.                                 </style>
  63.                 </head>
  64.                
  65.                
  66.                 <body>
  67.                                 <section>
  68.                                                 <article>
  69.                                                                 <img src="蓝.png" alt="蓝鸡腿">
  70.                                                                 <h1>蓝鸡腿</h1>
  71.                                                                 <p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”驱动学习的力量是恐惧。</p>
  72.                                                 </article>
  73.                                                 <article>
  74.                                                                 <img src="红.png" alt="红鸡腿">
  75.                                                                 <h1>红鸡腿</h1>
  76.                                                                 <p>富爸爸：“你要好好学习，以后就能开自己的公司，创造很多就业机会给别人。“驱动力量是爱，好好学就会帮到更多的人。</p>
  77.                                                 </article>
  78.                                 </section>
  79.                 </body>

  81. </html>
复制代码
3.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-14 22:13:11 | 显示全部楼层

撸鉄.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

红tea少年
发表于 2022-2-13 17:52:24 | 显示全部楼层
article元素 是不是应该添加
  1. display:inline-block;  
复制代码
??
否则示例的两个块就不在一行了.
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-25 13:31

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表