Contoh Gerak CSS
- Halaman Sebelumnya Menghapus Geser Buatan CSS
- Halaman Berikutnya inline-block CSS
Halaman ini menyediakan kasus bergerak yang biasa.
Grid / Kotak yang sama lebar
Dengan menggunakan float
Properti, dapat dengan mudah menggabungkan konten bergerak kotak:
实例
* { box-sizing: border-box; } .box { float: left; width: 33.33%; /* Tiga kotak (empat kotak menggunakan 25%, dua kotak menggunakan 50%, dan seterusnya) */ padding: 50px; /* Jika perlu menambahkan jarak antara gambar */ }
Apa itu box-sizing?
Anda dapat dengan mudah membuat tiga kotak bergerak bersamaan. Namun, ketika Anda menambahkan beberapa konten untuk menambahkan lebar setiap kotak (seperti padding atau border), kotak ini akan rusak. box-sizing
Properti ini memungkinkan kami untuk menyertakan padding dan border dalam lebar (dan tinggi) kotak keseluruhan, memastikan bahwa padding tetap berada di dalam kotak tanpa patah.
Anda dapat melihat di Box Sizing CSS Di bab ini, Anda akan belajar tentang properti box-sizing.
Gambar bersamaan



Jenis kotak ini (The grid of boxes) juga dapat digunakan untuk menampilkan gambar bersamaan:
实例
.img-container { float: left; width: 33.33%; /* Tiga kotak (empat kotak menggunakan 25%, dua kotak menggunakan 50%, dan seterusnya) */ padding: 5px; /* Jika perlu menambahkan jarak antara gambar */ }
Kotak yang sama lebar
Dalam kasus sebelumnya, Anda belajar bagaimana menggabungkan kotak bergerak dengan lebar yang sama. Namun, membuat kotak bergerak dengan tinggi yang sama tidak mudah. Namun, solusi yang cepat adalah menetapkan tinggi yang tetap, seperti contoh di bawah ini:
Box 1
Some content, some content, some content
Box 2
Some content, some content, some content
Some content, some content, some content
Some content, some content, some content
实例
.box { height: 500px; }
但是,这么做就失去了弹性。如果可以保证框中始终有相同数量的内容,那是可以的。但是很多时候,内容是不一样的。如果您在手机上尝试上例,则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长:
实例
使用 Flexbox 创建弹性框:
Flexbox 的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我们的 Flexbox CSS 章节中学习有关 Flexbox 布局模块的更多知识。
Web 布局实例
使用 float
属性完成整个 Web 布局也很常见:
实例
.header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; }
更多实例
- 带有边框和外边距的图像浮动到段落的右侧
- 让图像浮动到段落的右侧。在图像上添加边框和外边距。
- 带标题的图像浮动到右侧
- 让带有标题的图像向右浮动。
- 让段落的第一个字母向左浮动
- 让段落的第一个字母向左浮动并设置该字母的样式。
- 用浮动创建一个网站
- 使用浮动创建带有水平导航栏、页眉、页脚、左侧导航栏和主要内容的首页。
所有 CSS 浮动属性
属性 | 描述 |
---|---|
box-sizing | 定义元素的宽度和高度的计算方式:它们是否应包含内边距和边框。 |
clear | Tentukan elemen mana yang dapat menggelot di samping elemen yang dihapus dan di sisi mana. |
float | Tentukan bagaimana elemen harus menggelot. |
overflow | Tentukan apa yang terjadi jika konten melebihi kotak elemen. |
overflow-x | Tentukan cara pengelolaan tekanan kiri/kanan konten saat area konten elemen mengalami kelebihan. |
overflow-y | Tentukan cara pengelolaan tekanan atas/atas bawah konten saat area konten elemen mengalami kelebihan. |
- Halaman Sebelumnya Menghapus Geser Buatan CSS
- Halaman Berikutnya inline-block CSS