Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[Thắc mắc] Làm thế nào để các thành phần trong web có độ rộng bằng nhau.

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi thunderlion95, 14/3/14.

Lượt xem: 3,802

Trang 1 của 2

  1. thunderlion95 Thành viên cấp 3

    Tình hình là em đang học CSS, mà đến phần này thì bí không biết làm như thế nào.
    [​IMG]

    Cụ thể là thanh màu xanh ở trên là frame1, em đặt thuộc tính css như sau:

    #frame1 {
    position: fixed;
    top: 0px;
    left: 10%;
    right: 10%;
    display: flex;
    }

    Còn phần hình ở dưới em cho vào một thẻ div id=frame có thuộc tính như sau:

    #frame {
    background-color:#fff;
    margin-top: 220px;
    margin-left: 10%;
    margin-right: 10%;
    display: flex;
    padding: 10px;

    Cho em hỏi là tại sao left, right của cả 2 đều là 10% nhưng lại có sự sai lệch độ rộng vây các bác (phần bôi đỏ), Và có cách nào để sửa không ạ?
    Mong các bác giúp em, mấy hôm nay em tìm mãi mà ko biết làm sao! Em cám ơn nhiều ạ!

    Link online: http://thunderlion.url.ph/portfolio.html

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    Chỉnh sửa lần cuối: 19/3/14
    thunderlion95, 14/3/14
    #1
  2. Nguyễn Tất Thắng

    Nguyễn Tất Thắng Rất là bình thường

    Bạn thêm thuộc tính width vào trong 2 cái frame nhé! VD width=1000px cho cả 2 frame!
    Nguyễn Tất Thắng, 14/3/14
    #2
    thunderlion95 và pitlamgi thích bài viết này.
  3. thunderlion95

    thunderlion95 Thành viên cấp 3

    thunderlion95, 14/3/14
    #3
  4. Nguyễn Tất Thắng

    Nguyễn Tất Thắng Rất là bình thường

    Bạn thử cái này xem sao!
    Code:
    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
*{padding:0px; margin:0px; border:0px;}
.frame1{
    width:1000px;
    height:35px;
    background-color:#06C;}
.frame2{
    width:1000px;
    height:200px;
    background-color:#FFF;}
</style>
</head>
<body bgcolor="#666666";><center>
<div class="frame1"></div>
<div class="frame2"></div>
</center></body>
</html>
    Nguyễn Tất Thắng, 14/3/14
    #4
    thunderlion95 thích bài viết này
  5. thunderlion95

    thunderlion95 Thành viên cấp 3

    Vấn đề của em là cái position fixed của frame 1 ấy ạ. Em làm lại như thế này thì có vẻ ổn
    #frame1 {
    position: fixed;
    top: 0px;
    left: 108px;
    right: 108px;
    display: flex;
    }

    #frame {
    background-color:#fff;
    margin-top: 220px;
    margin-left: 100px;
    margin-right: 100px;
    display: flex;
    padding: 10px;}

    Tuy nhiên em muốn làm đơn vị là % thì lại không được, cứ zoom nhỏ hay to lên là nó lại ko khớp!
    thunderlion95, 15/3/14
    #5
  6. banbaonylong

    banbaonylong Ko phải assmin

    up lên host free rùi send link mình coi online xem.

    (mà cái này cần j flex nhỉ? lạm dụng wá)
    banbaonylong, 16/3/14
    #6
    thunderlion95 thích bài viết này
  7. thunderlion95

    thunderlion95 Thành viên cấp 3

    em thử làm thôi mà bác banbaonylong. Nói chung là trình độ tập sự nên cái gì cũng phải thử cho biết.
    thunderlion95, 16/3/14
    #7
  8. banbaonylong

    banbaonylong Ko phải assmin

    à, do mình có j lên chỉnh lun cho lẹ, chứ bạn nói hình dung cũng oải :D
    banbaonylong, 16/3/14
    #8
    thunderlion95 thích bài viết này
  9. thunderlion95

    thunderlion95 Thành viên cấp 3

    thunderlion95, 16/3/14
    #9
  10. banbaonylong

    banbaonylong Ko phải assmin

    ko gửi kèm cái ảnh sao àm chạy 8-}
    banbaonylong, 16/3/14
    #10
    thunderlion95 thích bài viết này
  11. thunderlion95

    thunderlion95 Thành viên cấp 3

    :)) thế để em đưa bác cả folder
    thunderlion95, 16/3/14
    #11
  12. thunderlion95

    thunderlion95 Thành viên cấp 3

    thunderlion95, 16/3/14
    #12
  13. banbaonylong

    banbaonylong Ko phải assmin

    #frame {
    background-color: #FFFFFF;
    display: flex;
    left: 10%;
    padding: 10px;
    position: absolute;
    right: 10%;
    top: 220px;
    }

    nó lấy px margin-left/right khác left/right nhé

    1 là bạn cho 1 cái div to bao bên ngoài, position relative, bên trong margin hết, 2 là lấy vị trí tuyệt đối
    banbaonylong, 16/3/14
    #13
    thunderlion95 thích bài viết này
  14. thunderlion95

    thunderlion95 Thành viên cấp 3

    Ồ ye! Được rồi! Em cám ơn mod nhiều nhé! :)
    Sẵn tiện cho em hỏi là làm thế nào chia web ra nhiều cột giống như diễn đàn mình được ạ!
    thunderlion95, 16/3/14
    #14
  15. banbaonylong

    banbaonylong Ko phải assmin

    thỉ cho 3 cái div có thuộc tính chung sau: display: block; float: left

    mỗi cái div có tổng width = 100%
    banbaonylong, 16/3/14
    #15
    thunderlion95 thích bài viết này
  16. thunderlion95

    thunderlion95 Thành viên cấp 3

    À vâng cám ơn anh! E thấy anh hay làm nhiều game troll assmin nhỉ! Nói thật là em ngưỡng mộ bác lắm! :)
    thunderlion95, 16/3/14
    #16
  17. banbaonylong

    banbaonylong Ko phải assmin

    :( mấy thớt đàng hòang ko coi, coi mấy thớt mình wậy vớ vẩn là sao
    banbaonylong, 16/3/14
    #17
  18. thunderlion95

    thunderlion95 Thành viên cấp 3

    thunderlion95, 18/3/14
    #18
  19. banbaonylong

    banbaonylong Ko phải assmin

    .imgBox {
    background-color: #994477;
    float: left;
    width: 100%;
    }
    banbaonylong, 18/3/14
    #19
  20. thunderlion95

    thunderlion95 Thành viên cấp 3

    Ủa vậy ko có cách nào để cho 2 cái nó sát vào nhau hả a? Ý em là vậy đó, em đổi màu tím để dễ nhìn thôi anh ạ!
    thunderlion95, 18/3/14
    #20
Trang 1 của 2

Ủng hộ diễn đàn