中心两个单独的列

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

来源

2013-04-04 user749798

'#homepagecontainer {text-align：center;}'然后将'margin-left：280px;'赋给'＃tweetaside'，但不给'＃masonrygrid'。我希望这能解决问题。 – 2013-04-04 07:49:40

因此，如果我从砌体网格中删除边距左侧，将tweet边距左侧更改为280px，并对主页进行文本对齐，最后从左侧的twitter列开始排列280px，并将砌体网格与页面重叠。 – user749798 2013-04-04 07:52:48

嗯，你是对的，然后给''masonrygrid'边缘 - 右：-280px'并检查。删除'margin-left：280px;' – 2013-04-04 07:54:00

修订

适应在另一篇文章中找到了答案：

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-04 08:15:01 melancia

是的，但是我希望砌体网格具有动态宽度。设置为500限制其大小。宽度如何可以公开结束？与容器一样。 – user749798 2013-04-04 14:03:49

我有一个类似的设置;这里是基础知识。它可能会使用一些清理工作，因为我基于模板（目前我无法找到它，对不起！）请注意，我在侧边栏方面遇到了一些问题，而且没有完全展开;我能够解决这个问题，因为它在我的页面上处于固定位置，但如果您希望侧边栏滚动，则可能会出现问题。这个例子的右边有侧栏，其左边是砌体，但它可以用任何方式。如果右侧有侧边栏，您可以在“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-04 19:17:55 Nails

中心两个单独的列

回答

相关问题