Chủ Nhật, 29 tháng 12, 2013
CSS Float
CSS Float là gì?
Với CSS float, một yếu tố có thể được đẩy sang trái hoặc bên phải, cho phép các yếu tố khác để bọc xung quanh nó.
Float là rất thường được sử dụng cho hình ảnh, nhưng nó cũng rất hữu ích khi làm việc với bố cục.
Làm thế nào yếu tố nổi
Yếu tố này được thả nổi theo chiều ngang, điều này có nghĩa là một yếu tố duy nhất có thể được lưu hành trái hoặc phải, không lên hoặc xuống.
Một yếu tố nổi sẽ di chuyển xa để trái hoặc phải như nó có thể. Thông thường điều này có nghĩa là tất cả các cách bên trái hoặc bên phải của phần tử có chứa.
Các yếu tố sau khi các phần tử nổi sẽ chảy xung quanh nó.
Các yếu tố trước khi các phần tử nổi sẽ không bị ảnh hưởng.
Nếu một hình ảnh được lưu hành bên phải, một văn bản sau đây chảy xung quanh nó, bên trái:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Thử nó cho mình »
Các yếu tố nổi Tiếp theo để mỗi khác
Nếu bạn đặt một số yếu tố nổi sau mỗi khác, họ sẽ nổi bên cạnh nhau nếu có chỗ.
Ở đây chúng tôi đã thực hiện một bộ sưu tập hình ảnh bằng cách sử dụng tài sản float:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images do not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>
Thử nó cho mình »
Tắt nổi - Sử dụng rõ ràng
Các yếu tố sau khi các phần tử nổi sẽ chảy xung quanh nó. Để tránh điều này, sử dụng tài sản rõ ràng.
Tài sản rõ ràng quy định cụ thể mà bên của một phần tử yếu tố nổi khác không được phép.
Thêm một dòng văn bản vào thư viện hình ảnh, sử dụng tài sản rõ ràng:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét