css零到一中级教程007：CSS 布局 - 浮动实例

最新推荐文章于 2024-07-21 19:13:42 发布

慕容屠苏

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量128

点赞数

分类专栏： css零到一文章标签： css html 前端

本文链接：https://blog.csdn.net/kerryqpw/article/details/123680936

版权

css零到一专栏收录该内容

98 篇文章 2 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

网格 / 等宽的框

通过使用 float 属性，可以轻松地并排浮动内容框：

实例

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h1>网格框</h1>

<p>并排浮动的框：</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <p>框中的一些文本。</p>
  </div>
  <div class="box" style="background-color:#ccc"&

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

慕容屠苏

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css零到一中级教程007：CSS 布局 - 浮动实例

网格 / 等宽的框通过使用float属性，可以轻松地并排浮动内容框：实例<!DOCTYPE html><html><head><style>* { box-sizing: border-box;}.box { float: left; width: 33.33%; padding: 50px;}.clearfix::after { content: ""; clear: both;...
复制链接

扫一扫