橡皮i 2021-11-11 11:20 采纳率: 50%
浏览 73
已结题

有好心的路人能指导一下一窍不通却学了web的卑微大学生么，没有提示这玩意我能敲十年！求指点

img

  • 写回答

2条回答 默认 最新

  • CSDN专家-文盲老顾 2021-11-11 12:11
    关注

    由于每个方框里都有数字，那么根据这个数字，大概是应该使用 float 布局，但是我没能实现 8 在9和10后边的布局。。。

     <body style="background:#cff;">
 <div style="width:1000px;background:white;overflow:hidden;">
  <div style="width:20%;height:200px;border:1px solid #333;background:gray;float:left;">1</div>
  <div style="width:20%;height:200px;border:1px solid #333;background:#666;float:left;">2</div>
  <div style="width:20%;height:200px;border:1px solid #333;background:gray;float:left;">3</div>
  <div style="width:20%;height:200px;border:1px solid #333;background:#666;float:left;">4</div>
  <div style="width:20%;height:200px;border:1px solid #333;background:gray;float:left;">5</div>
  <div style="width:30%;height:300px;border:1px solid #333;background:#666;float:left;">6</div>
  <div style="width:30%;height:300px;border:1px solid #ccc;background:white;float:left;">7</div>
  <div style="width:60%;height:200px;border:1px solid #333;background:gray;float:left;">8</div>
  <div style="width:40%;height:200px;border:1px solid #333;background:#666;float:right;">9</div>
  <div style="width:40%;height:300px;border:1px solid #333;background:gray;float:right;">10</div>
  <div style="width:100%;height:200px;border:1px solid #333;background:gray;float:left;">11</div>
 </div>
 </body>

    img

    只能手动将8移动到9和10后边

     <body style="background:#cff;">
 <div style="width:500px;background:white;overflow:hidden;">
  <div style="width:20%;height:100px;border:1px solid #333;background:gray;float:left;">1</div>
  <div style="width:20%;height:100px;border:1px solid #333;background:#666;float:left;">2</div>
  <div style="width:20%;height:100px;border:1px solid #333;background:gray;float:left;">3</div>
  <div style="width:20%;height:100px;border:1px solid #333;background:#666;float:left;">4</div>
  <div style="width:20%;height:100px;border:1px solid #333;background:gray;float:left;">5</div>
  <div style="width:30%;height:150px;border:1px solid #333;background:#666;float:left;">6</div>
  <div style="width:30%;height:150px;border:1px solid #ccc;background:white;float:left;">7</div>
  <div style="width:40%;height:100px;border:1px solid #333;background:#666;float:right;">9</div>
  <div style="width:40%;height:150px;border:1px solid #333;background:gray;float:right;">10</div>
  <div style="width:60%;height:100px;border:1px solid #333;background:gray;float:left;">8</div>
  <div style="width:100%;height:100px;border:1px solid #333;background:gray;float:left;">11</div>
 </div>
 </body>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 11月26日
  • 已采纳回答 11月18日
  • 创建了问题 11月11日

悬赏问题

  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题