橡皮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 nginx反向代理获取ip，java获取真实ip
  • ¥15 eda：门禁系统设计
  • ¥50 如何使用js去调用vscode-js-debugger的方法去调试网页
  • ¥15 376.1电表主站通信协议下发指令全被否认问题
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥15 复杂网络，变滞后传递熵，FDA
  • ¥20 csv格式数据集预处理及模型选择
  • ¥15 部分网页页面无法显示！
  • ¥15 怎样解决power bi 中设置管理聚合，详细信息表和详细信息列显示灰色，而不能选择相应的内容呢？
  • ¥15 QTOF MSE数据分析