01/10/2018, 12:28

HTML - Làm sao để xuống hàng ạ?

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

Duy Dang viết 14:30 ngày 01/10/2018

Đâ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>

Nguyễn Hữu Quyền viết 14:35 ngày 01/10/2018

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

Thân Hoàng viết 14:35 ngày 01/10/2018

những bài viết của anh khá tuyệt vời đó ạ =))

Hung viết 14:31 ngày 01/10/2018

Từ hồi sử dụng GridLayout và Flex, mấy kiến thức về float và clear quên hết

Vũ Thanh viết 14:30 ngày 01/10/2018

Tài liệu tham khảo: https://css-tricks.com/the-how-and-why-of-clearing-floats/

Duy Dang viết 14:37 ngày 01/10/2018

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.

Vũ Thanh viết 14:30 ngày 01/10/2018

Link cần thiết: https://css-tricks.com/snippets/css/clear-fix/

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Duy Dang

0 chủ đề

0 bài viết

Tác giả nổi bật