Paragraph với image tách biệt nhau

Trở về

  • 1,319

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 widthmargin 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.

Download file để thực hành

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 widthmargin 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.