Question

我想有一个特定的布局，但不知道如何在CSS中修复它。这是我的代码：

<html>
    <body>
        <div id="outer" style="text-align:center;">      
            <div id="mainContent" style="background-color:red; width:700px; margin-left:130px; 

                    display:inline-block;">
                <p>A Lot of Text Here. Yes, A Lot of Text. Gotta Love it. More Text.</p>
            </div>
            <div id="rightNav" style="background-color:blue; width:130px;                                   display:inline-block;">
                <p>Some Text</p>
            </div>
        </div>
    </body>
</html>

现在的问题是：
无论窗口大小是什么，无论边栏是否存在，我都希望内容div始终居中对齐。内容大约为700px，侧边栏大约为130px。侧边栏需要位于内容的右侧。

现在我已经成功完成了上述工作，但棘手的问题是如何解决这个问题，以便当窗口大小为830px（700 + 130）时，所有内容都可见并且侧边栏的一半未被切断由于内容div居中。
我希望我已经清楚地解释了这一点。

更新：我已更新代码以包含CSS。如您所见，红色部分居中，蓝色部分居中。这就是我想要的，当窗口太小时会出现问题，我总是在左边有一个至少130px的间隙，这不是我想要的。（但必须把它放在那里以使布局正确对齐）

Answer 1

这样的事可能会有所帮助

<html>
  <body style="overflow:hidden;">
      <div id="mainContent" style="overflow:auto; position:absolute; top:0px; left:0px; right:130px; bottom:0px;"></div>
      <div id="rightNav" style="overflow:auto; position:absolute; top:0px; width:130px; right:0px;"></div>
  </body>
</html>

<强>编辑：
@Nathan Arthur非常友好地为上面的解决方案添加了一个很好的小提琴。

......示范此动作：jsfiddle.net/2QQtU尝试移动中间分隔线以查看魔法。

Answer 2

CSS

#outer {
   position:relative;
   width:830px;
   margin:0 auto;
}

#content, sidebar {
   float:left;
}    

#content {
   width:700px;
   background-color:#afa;
}

#sidebar {
   width:130px;
   background-color:#faa;
}

这就是全部：）

* 编辑 * 只需添加背景颜色即可更好地查看示例。

Answer 3

在单个解决方案中看起来我想要的是不可能的。我将需要使用条件CSS来完成此任务。

Div对齐问题

3 个答案: