表格单元格父母中的猫头鹰轮播让父母变得怪异

Question

<section class='parent' style='display: table-cell;'>
//<div class='enclose'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
//</div><!--enclose-->
</section><!--parent-->

JS:

<script>
$('.parent').owlCarousel(); // without children enclosure div
//$('.enclose').owlCarousel(); // If children are enclosed inside a block-div
</script>

现在<div class='parent'>扩展大约10000到20000像素的宽度取决于里面的孩子的数量.在检查时,我了解到owlCarousel <div>根据物品的数量设置宽度.由于父级设置为table-cell显示样式,因此也会扩展.所以我只是添加了另一个<div>来编码子节点并将其显示属性设置为block.但这也行不通.有任何想法吗？

Answer 1

我倾向于在我的项目中大量使用和重用这个标记:

<div class="display_table">

    <div class="display_tablerow">

        <div style="display:table-cell;" class="parent display_tablecell"></div>

    </div>

</div>

与以下CSS配对:

.display_table {  
    width: 100%;
    display: table;
}
.display_tablerow {    
    width: 100%;
    display: table-row;
}
.display_tablecell {

    display: table-cell;
}

鉴于我遇到了与您相同的问题,我设法通过简单地添加"table-layout:fixed;"来解决问题.到上一个display_table css:

.display_table {
    display: table;
    width: 100%;
    table-layout: fixed;
}