圍繞在不同的分辨率

一個div我有屬性的DIV吼叫：圍繞在不同的分辨率

.videosHolder { 
width:970px; 
padding:5px; 
float:left; 
}

現在我有屬性的另一個DIV：

.rightbar{ 
    width:222px; 
    padding-bottom:10px; 
    float:right; 
    margin-top:10px; 
    margin-right: 10px; 
}

所以我的第一個浮動：左，它是好的，第二個漂浮在右邊，但我想要將它放在.videosHolder的空間之後，這個空間取決於屏幕分辨率。我的意思是，如果我的屏幕分辨率是1300px，第一個div有970px，那麼我必須將第二個div居中放置在330px的空間中。所以330px - 222px = 108px，但是如果我的分辨率是1600px，這個108px的空間將會是不同的數字。

謝謝！

來源

2013-11-21 Irene T.

你可以做這樣的事情

HTML：

<div id="right"> 
    <div id="right-center"> 
     test test 
    </div> 
</div> 

<div id="left"> 
    test test 
</div>

CSS：

#left 
{ 
    width: 100px; /* You can change this to 970px */ 
    background-color: red; 
} 

#right 
{ 
    position: absolute; 
    left: 100px; /* You can change this to 970px */ 
    right: 0; 

} 

#right-center 
{ 
    margin: 0 auto; 
    width: 80px; /* You can change this to 222px */ 
    background-color: blue; 
}

看到它在行動：http://jsfiddle.net/8QYfa/3/

來源

2013-11-21 14:32:47 Bart

在你的rightbar裏面添加一個div類rightbar-inner，給它一個寬度和中心div。

然後只浮動你的div類videosHolder。並設置rightbar DIV等於videosHolder的width的margin-right（如果你使用像LESS或SASS編譯器可以保存在一個變量的寬度並用它來設置寬度和餘量 - 右）

看到這個例子。我使div的寬度變小了，所以測試起來更容易。如果調整大小（不是瀏覽器，而是頁面中間的veritcal行），則可以看到右側欄正在調整大小，而右側欄內部居中居中。

http://jsfiddle.net/gwHC2/1/

來源

2013-11-21 14:29:03 Christophe

圍繞在不同的分辨率

回答

相關問題