0

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

2 回答 2

0

我有类似的设置；这是基础知识。它可能会使用一些清理，因为我基于模板（目前我似乎找不到，抱歉！）请注意，我在侧边栏没有一直向下延伸时遇到了一些困难；我能够解决这个问题，因为它在我的页面上处于固定位置，但如果您希望侧边栏滚动，这可能是一个问题。这个例子的侧边栏在右边，砌体在左边，但它可以去任何一种方式。如果您确实在右侧有侧边栏，您可能希望通过在“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 --*/
}

希望这对你有帮助！

于 2013-04-04T19:17:55.547 回答
0

更新

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

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

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

于 2013-04-04T08:15:01.520 回答