Paragraph với image tách biệt nhau
Vẫn là văn bản với image, giới thiệu tới các bạn một dạng khác biệt về layout.
Văn bản (paragraph) với image tách biệt nhau
Đoạn văn bản đơn giản tách biệt với image nằm bên trái, bằng cách sử dụng float: left cho image và margin-left cho đoạn văn bản sẽ tạo nên định dạng như mong muốn.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
p.image {
float: left;
width: 130px;
}
div.block {
margin-left: 140px; /* đoạn margin này sẽ bằng chiều rộng image + 10px */
}
div.block p {
padding-bottom: 15px;
text-align: justify;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix">
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng. Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng. Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
</div>
</div>
</body>
</html>
Hiển thị trình duyệt:
Chúng ta cũng có thể dùng width và margin thay thế cho margin-left, tuy nhiên đoạn văn bản sẽ không được linh hoạt theo nội dung.
Hai đoạn văn bản đơn giản tách biệt với image nằm bên phải.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
p.image {
float: right;
width: 130px;
}
div.block {
margin-right: 140px; /* đoạn margin này sẽ bằng chiều rộng image + 10px */
}
div.block p {
padding-bottom: 15px;
text-align: justify;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix">
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng. Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng. Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
</div>
</div>
</body>
</html>
Hiển thị trình duyệt:
Chúng ta cũng có thể dùng width và margin thay thế cho margin-right, tuy nhiên đoạn văn bản sẽ không được linh hoạt theo nội dung.