居中两个单独的列答案

【问题标题】：Center two separate columns居中两个单独的列
【发布时间】：2013-04-04 07:44:38
【问题描述】：

我有两列，一列是 jquery 砌体网格（动态），另一列是单独的推文列。

我希望两列在浏览器调整大小时保持居中。随着浏览器的增长/缩小，我可以让砌体网格保持居中，但是，我的推文列保持在左侧，固定。我宁愿推文列在砌体网格旁边移动。

我怎样才能让两者都居中？

<div id='homepagecontainer' style="float:right; width:100%; margin-left:-280px;">

<div id="tweetaside" style="float:left; margin-left:10px;margin-top:-10px;width:260px;">
  <div style="width:250px;">
     Long list of Tweets!!
  </div>
</div>

<div id="masonrygrid" style="margin-left:280px;">
  <div id="homepagescroll" style="margin: 0 auto;">
      <center>
         Masonry Grid Data
      </center>  
    </div>
  </div>
</div>

</div>

【问题讨论】：

#homepagecontainer{text-align:center;} 然后将margin-left:280px; 提供给#tweetaside，但不提供给#masonrygrid。我希望这能解决问题。
因此，如果我从砌体网格中删除 margin-left，将推文的 margin-left 更改为 280px 并为主页进行文本对齐，我最终会得到距离左侧 280px 的 twitter 列，并且砌体网格与页面重叠...
嗯，你是对的，然后将margin-right: -280px 给#masonrygrid 并检查。删除margin-left: 280px;
这只会使砌体网格扩展到右侧的边界之外。 twitter 栏最终保持固定并位于左侧。我希望 twitter 栏与页面中心的砖石网格并排浮动...

标签： jquery css jquery-masonry multiple-columns

【解决方案1】：

更新

改编在另一篇文章中找到的答案：

http://jsfiddle.net/jZEvL/

HTML

<div id="hideoverflow">
    <div id="wrapper">
        <div id="inner">
           <div id="left">
               <p>Blah blah blah</p>
           </div>
           <div id="right">
               <p>Blah blah blah blah blah blah blah</p>
           </div>
        </div>
    </div>
</div>

CSS

#outer 
{ 
    overflow: hidden; 
}

#wrapper
{
    position:relative; 
    left:50%; 
    float:left;
}

#inner
{
    position:relative; 
    left:-50%; 
    float:left;
}

#left,
#right
{
    display:inline-table;
    height:200px;
}

#left
{
    margin-right:10px;     
    background-color:red;
}

#right
{
    margin:0;     
    background-color:blue;
}

我希望这次它符合您的要求。 :)

【讨论】：

是的，但我希望砖石网格具有动态宽度。设置为 500 会限制其大小。 thag 宽度如何是开放式的？与容器相同。

【解决方案2】：

我有类似的设置；这是基础知识。它可能会使用一些清理，因为我基于模板（目前我似乎找不到，抱歉！）请注意，我在侧边栏没有一直向下延伸时遇到了一些困难；我能够解决此问题，因为它在我的页面上处于固定位置，但如果您希望侧边栏滚动，这可能是一个问题。这个例子的侧边栏在右边，砌体在左边，但它可以去任何一种方式。如果您确实在右侧有侧边栏，您可能希望通过在“itemSelector：'.post'”之后添加“isRTL：true”来更改您的砌体以向右折叠。

HTML：

<center>
<div class="main">
    <div id="fixed-left"></div>
    <div id="fixed-sidebar"> Your tweets </div>
    <div id="fixed-right"></div>
    <div id="fluid">
        <div id="posts"> Masonry grid </div>
    </div>
</div>
</center>

CSS：

.main {
    position: relative;
    display: block;
    width: 96%;
    text-align: left;
    margin: 0 auto;
}

#fixed-left {   /*-- this div is probably unnecessary, I just keep it in case I want to add a column --*/
    float: left;
    display: inline;
    width: 0;
}

#fixed-sidebar {
    float: right;   /*-- float: left if you want your sidebar to the left --*/
    display: inline;
    height: 100%;
    width: 250px;
}

#fixed-right {  /*-- this div is probably unnecessary, I just keep it in case I want to add a column --*/
    float: right;
    display: inline;
    width: 0;
}

#fluid {
    float: none;
    height: 100%;
    width: auto;
    margin-right: 250px;    /*-- same value as fixed-sidebar width; use margin-left if you want your sidebar to the left --*/
}

希望对你有帮助！

【讨论】：