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;
}

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

1 个答案: