Chào mọi người, em đang thử làm 1 giao diện như thế này, sau đó em cần xuống dòng rồi tạo 1 đường thẳng ngang qua bằng <hr> nhưng em không biết làm thế nào để xuống hàng trong trường hợp này ạ.
HTML - Làm sao để xuống hàng ạ?
Đây là code của em ạ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing webpage</title>
<style>
div {
float:left;
margin: 2px;
font-size:14px;
transition-delay:0s;
transition:0.4s all;
}
div:hover{
font-size:20px;
transition-delay: 0s;
}
div.dinside{
width:250px;height:100px;
transition: .4s all;
transition-delay: 0s;
background-color:green;
}
div.dinside:hover {
width:300px;height:125px;
background-color:aquamarine;
transition-delay: 0s;
}
</style>
</head>
<body>
<div>
<div>
<div class="dinside"></div>
<p>Video's Title</p>
<p>Channel</p>
<p>Time</p>
</div>
<div>
<div class="dinside"></div>
<p>Video's Title</p>
<p>Channel</p>
<p>Time</p>
</div>
<div>
<div class="dinside"></div>
<p>Video's Title</p>
<p>Channel</p>
<p>Time</p>
</div>
<div>
<div class="dinside"></div>
<p>Video's Title</p>
<p>Channel</p>
<p>Time</p>
</div>
<div>
<div class="dinside"></div>
<p>Video's Title</p>
<p>Channel</p>
<p>Time</p>
</div>
</div>
<hr><hr><hr><hr>
</body>
</html>
Chào em, vấn đề em gặp phải là do em cho phần tử div float nhưng lại không áp dụng kỹ thuật clearfix nên sẽ dẫn đến giao diện không thể điều khiển được như trên.
Anh có viết các bài viết ở trang web dạy học của anh và trình bày về kỹ thuật này một cách cụ thể và minh họa rõ ràng, em đọc theo link dưới đây nhé.
Bài 9 - CSS Float | Sociss Class - Online Education Center
Ngoài ra để cũng cố hơn về kỹ thuật trình bày em nên đọc thêm các bài học khác của anh nhé bao gồm.
Bài 7 - CSS Block | Sociss Class - Online Education Center
Bài 8 - CSS Box Model | Sociss Class - Online Education Center
Bài 10 - CSS Columns và Grid | Sociss Class - Online Education Center
Đọc xong 4 bài viết này em sẽ nắm rõ và biết cách giải quyết vấn đề trên. Nếu có thắc mắc gì em có thể inbox fanpage , comment dưới bài viết hoặc gửi email vào email của anh ở cuối bài viết.
Chúc em học tốt,
Nguyễn Hữu Quyền
3 Likes
những bài viết của anh khá tuyệt vời đó ạ =))
1 Like
Từ hồi sử dụng GridLayout và Flex, mấy kiến thức về float và clear quên hết 
1 Like
Cảm ơn mọi người, khóa học HTML này là em học trên w3schools mà vốn tiếng Anh tạm tạm nên em không thể hiểu rõ hết được ạ, nếu không có anh Quyền nói chắc em cũng không hề biết đến kỹ thuật clearfix v.v… Em sẽ học khóa của anh Quyền, cảm ơn mọi người nhiều.
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?