将两个 div 居中，最大宽度：1224px，在 100% 宽度的容器内

问题描述

注意：我无法编辑 HTML，因此我必须找到解决方法。

HTML：

<div id="container">
    <div id="breadcrumbAds">...</div>
    <div id="breadcrumbWrapper">...</div>
    <div id="containerTopParsys">...</div>
    <div id="leftColWrapper" class="column663Wrapper">...</div>
    <div id="rightColWrapper" class="rightColumn663Wrapper">...</div>
    <div style="clear:both;"></div>
    <div id="containerBottomParsys">...</div>
    <div style="clear:both;"></div>
    <div id="bgpromo">...</div>
    <div style="clear:both;">...</div>
    <div style="clear:both;"></div>
</div>

问题是#container内的所有 div，除了#leftColWrapper和#rightColWrapper ，都需要是#container 100%宽度，但#leftColWrapper和#rightColWrapper需要彼此相邻堆叠并在其中居中（一起） 100% #container ， max-width为1224px 。

我尝试使用以下 jQuery 在#left ... 和#right ... 周围添加一个包装 div，但它最终抓取了这些容器中的广告并将它们放置在存储页面 JS 的组件中。

(function($) {
    $("#leftColWrapper, #rightColWrapper").wrapAll("<div class=\"colWrapper\" />");
})(jQuery);

我要么需要另一个解决方案来将这两个 div 包装在一起，以便我可以将max-width设置为1224px并将它们居中，或者我需要知道为什么这个 jQuery 会拾取这些广告并将它们复制到 JS 组件中。