Question

我正在使用并引用flexboxgrid CSS。如何拥有相等高度的柱子？我的侧边栏id=dtside具有背景色，我希望它的高度与id=dtmain相等。在使用flexboxgrid之前，我使用的是display:table和display: table-cell，它们运作良好，但是我们切换到flexbox。我试图将两者结合起来，结果不是我想要的。我还找到了一些在线解决方案，这些解决方案表明我只需要向父display:flex添加div并尝试将其添加到class=box和class=row中，但效果不佳。

<div class="box box-container" id="dtmaincontents">
            <div class="row top-xs">
                <div class="col-xs-12 col-md-8" id="dtmain">
                    <div class="col-main" data-name="Main Page Content">
                        <!--CS: Start Page Field: Page Content Snippet-->
                        <!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                        <!--MS:<PageFieldRichHtmlField:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server">-->
                            <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
                        <!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
                        <!--CE: End Page Field: Page Content Snippet-->
                    </div>
                </div>
                <div class="col-xs-12 col-md-4" id="dtside">
                    <div class="col-side" data-name="Side Page Content">
                        <!--CS: Start Page Field: Side Content Snippet-->
                        <!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                        <!--MS:<PageFieldRichHtmlField:RichHtmlField FieldName="995e9a86-eb77-4305-9cbe-6ea7c7e21c43" runat="server">-->
                            <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
                        <!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
                        <!--CE: End Page Field: Side Content Snippet-->
                    </div>
                </div>
            </div>
        </div>

我尝试在display: flex中添加#dtmaincontents，但是可以正常使用，但是如果dtmain的内容没有使用全角，则侧栏会向左移动。

Flexboxgrid-高度相等

0 个答案: