认证高级PHP讲师
我根据题主的思路精简了一下。关键就是要让第四个p不要跟着第三个p，所以要让第三个向右浮动，其他向左浮动。
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="utf-8"> <style type="text/css"> .box{ width:1300px; height: 400px; margin: 0 auto; } .icon1{ width:22%; height:100%; background-color: #ccc; float: left; } .icon2{ width:58%; height:50%; background-color: #09d4e8; float: left; } .icon4{ width:58%; height:50%; background-color: #04802a; float: left; } .icon3{ width:20%; height:100%; background-color: #bb5f01; float: right; } </style> </head> <body> <p class="box"> <p class="icon1">1</p> <p class="icon2">2</p> <p class="icon3">3</p> <p class="icon4">4</p> </p> </body> </html>
自己回答吧<!-- css -->
<style type="text/css"> .box{ width:380px; height: 60px; background-color: gray; } .icon{ width:20%; height:98%; border: 1px solid red; float: left; display:inline-block; } .icon2{ width:58%; height:40%; border: 1px solid red; display:inline-block; margin-top: 2px; } .icon3{ width:20%; height:98%; border: 1px solid red; display:inline-block; float: right; text-align: center; line-height: 60px; vertical-align: center } </style> <!-- html --> <p class="box"> <p class="icon"> <img width="100%" height="100%" alt="" src="../img/icon_138.png"> </p> <p class="icon3">关注</p> <p class="icon2">啊大大大阿发</p> <p class="icon2">爽肤水发发发啊</p> </p>
最简单的方法就是使用绝对定位
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我根据题主的思路精简了一下。关键就是要让第四个p不要跟着第三个p，所以要让第三个向右浮动，其他向左浮动。
自己回答吧
<!-- css -->
最简单的方法就是使用绝对定位