Question

注意：我无法编辑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除外，需要 100％宽度{{1} }，但#container和#leftColWrapper需要彼此相邻堆叠，并在 100％ #rightColWrapper中居中（一起），{{1} } 1224px 。

我尝试使用以下jQuery在#container ...和max-width ...周围添加包装器div，但它最终抓住了这些容器中的广告并将它们放在组件中该页面的JS已存储。

#left

我要么需要另外一个解决方案来将这两个div组合在一起，这样我就可以设置{strong> 1224px 的#right并将它们居中，或者我需要知道为什么这个jQuery会起作用这些广告并在JS组件中复制它们。

Answer 1

#container{
text-align: center;
font-size: 0;
}
#container > div{
outline: 1px solid #333;
display: inline-block;
min-height: 10px;
text-align: left;
width: 100%;
font-size: 14px;
}
#container #leftColWrapper, #container #rightColWrapper{
width: 50%;
max-width: 612px;
}

<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">width: 50%;<br>
max-width: 612px;</div><div id="rightColWrapper" class="rightColumn663Wrapper">width: 50%;<br>
max-width: 612px;</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>

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

1 个答案: