Question

基本上，我有这样的布局：

<div id="wrapper">
    <div id="header"> HEADER </div>
    <div id="body">
        <div id="table"><div id="tablerow">
        <div id="content"> MAIN CONTENT </div>   
        <div id="sidebar"> SIDEBAR </div>
        </div></div>
    </div>
</div>

在实时网站上有点不同，但基本上它的结构都是这样的。问题是，我想将侧边栏对齐到左侧，而不是右侧（目前它在右侧）。

我将侧边栏放在内容之后，因为需要首先加载内容，然后是侧边栏。

我试过这个CSS：

#body { overflow:auto; }
#table {display:table;}
#tablerow {display:table-row;}
#sidebar { float:left; width:150px; display:table-cell;margin-right:5px; }
#content { float:right; display:table-cell; }

它在演示（jsfiddle.net）中运行良好，但它在实际网站中根本不起作用。

相反，发生的事情是侧边栏与左下角对齐（在内容之后）。我想这是因为内容和侧边栏都有<table>个，但我不确定...我无法删除<table>因为某些原因需要这些内容。

此外，如果有人想知道<div id="table"><div id="tablerow">的用途是什么，它将用于网站上的某个JavaScript。

有人可以帮忙吗？请原谅我可怜的英文..

如果有人需要查看，这是实时网站：http://bleachindonesia.com/forum/（HTML很乱）

Answer 1

这

<div style="width: 100%; display: table;">

除去

display: table;

这

<div style="display: table-row;">

除去

display: table-row;

要

<div id="content" style="padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; float: right; display: table-cell;">

给出宽度，例如

width: 900px;

现在你的

<div class="lside" id="sidemenu" style="width: 20%; margin-right: 5px; display: table-cell;">

在左侧。

将边栏（在内容后放置）对齐到左侧

1 个答案: