Question

在下一页上，页面底部“PORTFOLIO ATTRIBUTES”选项卡中的并排内容在桌面浏览器上呈现正常，但是当您与表格并排查看图表时移动浏览器，它们最终重叠，一个项目被切断：

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类并消除你的内联宽度样式

标签式布局中的并排div在移动浏览器上重叠

1 个答案: