Question

我有两列，一个是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>

Answer 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;
}

我希望这次它符合您的要求。：）

Answer 2

我有类似的设置;这是基础知识。它可能会使用一些清理，因为我基于模板（我现在似乎无法找到，抱歉！）请注意，我有一些困难，侧边栏没有完全向下拉伸;我能够解决这个问题，因为它在我的页面上处于固定位置，但如果您希望侧边栏滚动，则可能会出现问题。这个例子的右边是侧边栏，左边是砌体，但它可以采用任何一种方式。如果右侧有侧边栏，您可能希望通过在“itemSelector：'。postt'”之后添加“isRTL：true”来改变您的Masonry向右折叠。

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 --*/
}

希望这能帮到你！

中心两个单独的列

2 个答案: