html - 选项卡式布局中的并排 div 在移动浏览器上重叠

Question

在下一页中，页面底部“投资组合属性”选项卡中的并排内容在桌面浏览器上呈现得很好，但是当您在桌面上并排查看图表和表格时一个移动浏览器，它们最终会重叠并且一个元素被切断:

http://www.realitysharesadvisors.com/indexes/divcon-leaders/

关于如何在移动大小的浏览器窗口上保持并排和响应的任何建议？页面顶部的图表和表格似乎呈现得很好，并且在移动浏览器上并排显示。谢谢。

代码如下:

<div id="attributes" class="tab-pane fade"><div style="width:65%;display:inline-block"><iframe src="/charts/DIVCONleaderspie.htm" width="100%" height="450px" scrolling="no" frameBorder="0"></iframe></div><div style="width:33%;float:right"><table style="width:100%;font-size:14px;padding:0px"><thead style="text-align:left"><tr><th style="color:#FFFFFF;background-color:#005580" scope="col">TOP 10 HOLDINGS</th><th style="color:#FFFFFF;background-color:#005580" scope="col">WEIGHT<sup>*</sup></th></tr></thead><tbody><tr><td>Starbucks Corp.</td><td>5.16%</td></tr><tr><td>Yum! Brands, Inc.</td><td>4.63%</td></tr><tr><td>Celanese Corp.</td><td>4.37%</td></tr><tr><td>Nike Inc.</td><td>4.11%</td></tr><tr><td>Moody's Corp.</td><td>4.04%</td></tr><tr><td>CR Bard Inc.</td><td>3.88%</td></tr><tr><td>CVS Health Corp.</td><td>3.86%</td></tr><tr><td>Wabtec Corp.</td><td>3.80%</td></tr><tr><td>Visa Inc.</td><td>3.73%</td></tr><tr><td>Polaris Industries Inc.</td><td>3.68%</td></tr></tbody></table></div><br /></div>

Answer 1

您可能不应该在这里使用内联样式，但那是一个完全不同的讨论。在移动显示中，您可能希望这些列使用

扩展到 100%

@media screen and (max-width: 300px) {
    .my-element {
        width: 100%;
    }
}

或者更好，因为你使用的是 Bootstrap ，你可以将两个 div 包装在一个 .row div 中，然后为它们分配一个 col-md-6 类并消除你的内联宽度样式