居中在另一個較窄的DIV寬DIV

我有兩個div，一個嵌套在另一個。主div有css屬性max-width:100%，所以它不能比用戶屏幕更寬。現在，第二個div非常寬（1400px），並且包含很多其他元素，但不是所有的邊緣都需要被看到。所以，如何（理想情況下沒有Javascript）可以在第一個div中居中顯示第二個寬div，這樣當用戶屏幕寬度只有1000px，而不是顯示寬div的第一個1000px而剩餘的已剪裁時，有200px從左側和右側裁剪，1000px被從中心取走？居中在另一個較窄的DIV寬DIV

CODE

<div style="max-width:100%"> 
    <div style="position:relative;width:1400px"> 
     <!-- PICTURES, LINKS, ETC --> 
    </div> 
</div>

來源

2013-08-30 topherg

你可以張貼一些代碼，或顯示你已經試過什麼的例子嗎？這聽起來像你只是想能夠在另一個'div'中放置一個'div'。 – kunalbhat

你可以用一種叫做收縮包裝實現這一目標。您將需要一個額外的div來包裝大型內部div，將其拉向左側。內部div可以自行糾正，並將其自身向右拉到與其容器相比的右側。這應該有你想要的效果。

<div class="max-width-container"> 
    <div class="shrink-wrap"> 
     <div class="very-wide-inner-div"></div> 
    </div> 
</div> 

.shrink-wrap { 
    float: right; 
    position: relative; 
    left: -50%; 
} 
.very-wide-inner-div { 
    position: relative; 
    left: 50%; 
    width: $some_huge_number; 
}

http://jsfiddle.net/2j2mh/

來源

2013-08-30 14:17:56

假設你的HTML看起來像這樣：

<div class="narrow"><div class="wide">blah de blah</div></div>

認爲你可以像這樣的東西做到這一點：

.narrow {width:1000px; overflow:hidden;} 
.wide {width:1400px; position:relative; left:50%; margin-left:-700px;}

的margin-left是寬度的一半格

，如果你檢查的小提琴元素，你會看到它是坐在中間

http://jsfiddle.net/peteng/dtNKr/4/

來源

2013-08-30 14:16:44 Pete

居中在另一個較窄的DIV寬DIV

回答

相關問題