Bài viết này cung cấp một ví dụ(mã nguồn) chuẩn về canh hình ở lề trái và nội dụng động theo trình duyệt ở lề phải kèm theo một khu vực tiêu đều nằm ở phía trên hải phần này.
HTML & CSS Source:
HTML & CSS Source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - HTML & CSS CODE(mã nguồn) canh hình ảnh(image) ở lề trái và nội dung ở lề phải có tiêu đề.</title>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
<style type='text/css'>
.post-container {
margin: 20px 20px 0 0;
border: 5px solid #333;
overflow: auto
}
.post-thumb {
float: left
}
.post-thumb img {
display: block
}
.post-content {
margin-left: 210px
}
.post-title {
font-weight: bold;
font-size: 200%;
padding: 9px;
background: #ccc
}
</style>
</head>
<body>
<div class="post-container">
<h3 class="post-title">Post title</h3>
<div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
<div class="post-content">
<p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p></div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - HTML & CSS CODE(mã nguồn) canh hình ảnh(image) ở lề trái và nội dung ở lề phải có tiêu đề.</title>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
<style type='text/css'>
.post-container {
margin: 20px 20px 0 0;
border: 5px solid #333;
overflow: auto
}
.post-thumb {
float: left
}
.post-thumb img {
display: block
}
.post-content {
margin-left: 210px
}
.post-title {
font-weight: bold;
font-size: 200%;
padding: 9px;
background: #ccc
}
</style>
</head>
<body>
<div class="post-container">
<h3 class="post-title">Post title</h3>
<div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
<div class="post-content">
<p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p></div>
</div>
</body>
</html>
No comments:
Post a Comment