Yêu cầu Dec 12th, 2019 2:18 p.m. 1117 0 3
  • 1117 0 3
0

Làm thế nào để các div tự động cao bằng nhau

Chia sẻ
  • 1117 0 3

Mình có các khối div như thế này. Sau khi đổ dữ liệu, các khối div sẽ lệch nhau. Làm thế nào để các div tự động co giãn bảng nhau? Nhờ các bác giúp đỡ, minh xin cảm ơn. Mình đã thử height: 100% nhưng k dc. Hoặc các bác có từ khóa, link hướng dẫn nào cho mình xin ạ.

3 CÂU TRẢ LỜI


Đã trả lời Dec 12th, 2019 2:43 p.m.
+4

Nếu bác dùng display: flex thì sử dụng cùng với align-items: stretch để kéo các item trong div đó cùng chiều cao

Chia sẻ
Đã trả lời Dec 26th, 2019 10:15 a.m.
+1

Bạn có thể nhét vào 2 cột của table mà vì 2 cột của 1 table nó luôn bằng nhau.

<style>
    .left{
        height: 100%;
        background: red;
        width: 500px;
    }
    .right{
        background: blue;
        width: 500px;
        height:100%;
    }
    .table-test{
        height: 500px;
    }
</style>
<body> <table class="table-test"> <tr> <td>
            </div>
        </td>
        <td>
            <div class="right">
            
            </div>
        </td>
    </tr>
</table>
</body>
Chia sẻ
Avatar hieu nguyen @hieuhumg
Dec 27th, 2019 3:02 a.m.

cảm ơn bác, rất hay

Avatar Quang Tú @caoquangtu
Dec 27th, 2019 9:57 a.m.

Trước em cũng gặp trường hợp này rồi nên em biết bác ạ =))

Đã trả lời Dec 12th, 2019 2:19 p.m.
0

co theo chiều cao hay rộng thế bạn ???

Chia sẻ
Avatar hieu nguyen @hieuhumg
Dec 12th, 2019 2:23 p.m.

Tức là khí kéo dãn màn hình thì nó vẫn tự co bằng nhau ấy bác, hiện tại co giãn nó bị lệch, hoặc khi dữ liệu 1 div nhiều hơn thì nó sẽ cao hơn div.png

Dec 12th, 2019 2:24 p.m.

@hieuhumg bạn có thế them khảo luôn ví dụ này nhé https://www.w3schools.com/howto/howto_css_equal_height.asp

Avatar hieu nguyen @hieuhumg
Dec 12th, 2019 2:26 p.m.

@HuyDQ ồ thank bác, đúng thứ cần tìm, cái này làm dc vs flex k bác. Cảm ơn bác nhiều

Dec 12th, 2019 2:29 p.m.

@hieuhumg nếu bạn dùng flex chỉ để các cột ở cạnh nhau thôi thì có thể dùng thuộc tính display: table như trong ví dụ trên và nội dung bên trong đó bạn để display: table-cell thì nó sẽ tự động nằm cạnh nhau

Avatar hieu nguyen @hieuhumg
Dec 12th, 2019 4:27 p.m.

@HuyDQ alo bác ơi, cái này cùng div ms làm dc, khác div thì chịu

Dec 12th, 2019 5:16 p.m.

@hieuhumg bạn có thể show demo cấu trúc div hiện tại của bạn không

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí