水平居中两个div（宽度不相等），没有包裹

Question

我的页面如下所示：http://ink-12.terc.edu/index.cfm 当窗口展开时，我想让左边的图片（儿童图纸）跟随其他居中的内容：

根据我在其他答案中找到的建议，我添加了一个外部div（#maincontent）来保存我要滚动的两个div而不是换行（#tbltframe和#drawings） ，以及一些额外的编码（overflow:auto; display:inline-block; white-space:nowrap）。

现在我的页面看起来像这样：  http://ink-12.web5test.terc.edu/index.cfm

所以现在它没有包裹（太棒了！），但它切断了我右侧的投影（你仍然可以在底部看到它）。我需要再次使主要内容居中（遵循居中的页眉和页脚） - 类似于我列出的第一个网页。更改后，主要内容左对齐。我尝试添加margin-right和margin-left:auto以及text-align:center，但都没有。我还添加了一个最小宽度，似乎也没有。当我将min-width更改为更大的值（74em）时，我可以再次看到阴影，然后我不知道为什么，因为#tbltframe（50em）和#drawings（14em）=共64em。

非常感谢任何帮助。建议在我列出的任一网页上推进代码都没问题。谢谢！

Answer 1

请在skeleton.css第64行上尝试以下css

#maincontent {
    display: inline-block;
    overflow: auto;
    white-space: nowrap;
    width: 1169px;
}

它会增加主内容div的宽度，因此图像不会从侧面切割..

Answer 2

找到解决方案：http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/

必须：

在外部div（#maincontent）

上创建最小宽度或宽度

使用display：block

使#maincontent成为块元素

使用text-align：center

中心#maincontent

使内部div（#drawings和#tbltframe）不包含#maincontent with white-space：nowrap;

使用display：inline-block

创建内部div内联块元素

然后使用white-space：normal

再次使文本内部换行（如果需要）