中心兩個單獨的列

我有兩列，一個是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

中心兩個單獨的列

回答

相關問題