Help Tạo 2 cột forum node trên Xenforo 2

[Richard Ngo]

Chào các anh chị,
Tình hình là em đang chuẩn bị build cái forum trên Xenforo 2.0.
em muốn chia forum thành 2 cột, em đã chỉnh trong template: node_list.less

.node-body
width: 49.999998%;

thì đã OK

Nhưng khi thêm vào

float: left;
thì nó lại bị như thế này:

Nhờ các anh chị giúp em với ạ,
Em vô cùng cảm ơn,

 

[aviaiva]

thêm cái thẻ

<div style="clear:both"></div>

dưới cái đoạn code float là được
ví dụ

<div class="main" style="float:left;width:49%">
salkdfjlkàlkạdflkádflkjádf
</div>
<div stlye="clear:both"></div>
<div class="main" style="float:righ;width:49%">
dflskjfslkdfj
</div>
<div stlye="clear:both"></div>

nhưng mà nên tìm style làm sẵn tùy chỉnh thích 2, 3 cột đều ok ấy, tự code mà không biết css đến lúc nó vỡ nát trên điện thoại lại mất công

 

[Richard Ngo]

Cảm ơn bác aviaiva.
Thêm thẻ <div style="clear:both"></div> vào thì ẻm lại chỉ hiển thị đúng 1 cột.
Hic hic

 

[dcstylexf]

Nếu như style bạn không chỉnh sửa gì tên class thì có thể áp dụng code của mình hoàn toàn ok, đã Responsive cho mobile nhé.

Demo: https://androidviet.net

Thêm code này vào EXTRA.CSS

.nodeList {
    display: flex;
    flex-wrap: wrap;
}

#forums .node.level_1 {
    padding-left: 15px;
    padding-right: 15px;
    clear: left;
    width: 100%;
    float: left;
    box-sizing: border-box;
    margin-bottom: 25px;
}

.nodeList .node.level_2 {
    display: flex;
    clear: left;
    float: left;
    width: 50%;
    padding: 0 5px;
    box-sizing: border-box;
}

.nodeList .node.level_2:last-child:nth-child(odd) {
    width: 100%;
}

.nodeList .node.level_2 .nodeInfo {
    width: 100%;
    flex: 0 1 auto;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media (max-width: 610px) {
    .Responsive .nodeList .node.level_2 {
        width: 100%;
    }
   
    .Responsive .nodeList .node.level_2 .nodeLastPost {
        white-space: normal;
    }

 

[THB]

Xenforo 2.0.
làm trên nó có mà 3x7=21 ngày dẹp.
nó chạy thử mà, chưa có bản chính mà dùng làm gì?
sau này nó thay đổi thế nào sao biết đc. dùng 1.5.14 cũng có khác gì đâu. cần gì phải mới nhất chứ?

 

[dcstylexf]

Xenforo 2.0.
làm trên nó có mà 3x7=21 ngày dẹp.
nó chạy thử mà, chưa có bản chính mà dùng làm gì?
sau này nó thay đổi thế nào sao biết đc. dùng 1.5.14 cũng có khác gì đâu. cần gì phải mới nhất chứ?

Chời đựu. Hóa ra thớt dùng Xen 2
Em cứ tưởng Xen 1 nên đưa code kia, thảo nào thớt dùng không được =))