Asked thg 12 12, 2019 2:18 CH 764 0 3
  • 764 0 3
0

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

Share
  • 764 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 ANSWERS


Answered thg 12 12, 2019 2:43 CH
+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

Share
Answered thg 12 26, 2019 10:15 SA
+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>
Share
Avatar hieu nguyen @hieuhumg
thg 12 27, 2019 3:02 SA

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

0
| Reply
Share
Avatar Quang Tú @caoquangtu
thg 12 27, 2019 9:57 SA

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

0
| Reply
Share
Answered thg 12 12, 2019 2:19 CH
0

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

Share
Avatar hieu nguyen @hieuhumg
thg 12 12, 2019 2:23 CH

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

0
| Reply
Share
thg 12 12, 2019 2:24 CH

@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

+1
| Reply
Share
Avatar hieu nguyen @hieuhumg
thg 12 12, 2019 2:26 CH

@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

0
| Reply
Share
thg 12 12, 2019 2:29 CH

@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

0
| Reply
Share
Avatar hieu nguyen @hieuhumg
thg 12 12, 2019 4:27 CH

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

0
| Reply
Share
thg 12 12, 2019 5:16 CH

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

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.