在未知寬度的父容器中集中固定寬度的子元素

嗨，HTML/CSS Developers！卡在一個奇怪的場景將嘗試通過圖像解釋我的查詢。需要它在IE 8或9 atleast中工作。在未知寬度的父容器中集中固定寬度的子元素

點數： 其用於響應佈局的方法，

.container {width:100%;margin-left:auto;margin-right:auto;display:block;} 
.parent-container {width:auto;overflow:hidden;margin:0 auto;display:block} 
.child-element {width: 285px;float:left 
}

層次 .container> .parent容器> .child元件

標籤： 我有一個100％的容器

在裏面，我有一個父容器{沒有寬度聲明（紅色背景顏色）}裏面我有子元素具有固定的寬度。

我想要什麼，不管我的屏幕尺寸是多少，如果有3個子元素或4子元素的空間，我的父元素應該始終居中。子元素的

寬度應有助於父元素寬度

這是我

This is what I have

這就是我得到 This is what I'm getting

這就是我希望它是（見父寬度減小取決於子元素） This is what I need

FIDDLE

http://jsfiddle.net/happy2deepak/9wm7ppwL/2/

來源

2015-02-11 Deepak Yadav

請同時添加您的HTML。 – panther 2015-02-11 14:35:00

好吧..在一段時間添加小提琴 – 2015-02-11 14:39:59

@ happy2deepak我想你會需要一些JavaScript的。 – 2015-02-11 16:12:30

你需要一些JavaScript來更新父根據窗口寬度設置容器的寬度，可以通過將窗口寬度除以子寬度（包括填充和邊距）來實現，並取最大可能的子區域作爲除法結果的底面

function setContainerWidth(){ 
    var childWidth = 305, 
     winWidth = $(window).width(), 
     parentContainer = $('body').find('.parent-container'), 
     minChildren, 
     containerCalculatedWidth; 

     minChildren = Math.floor(winWidth/childWidth); 
     parentContainer.css("width", minChildren * childWidth); 
} 

setContainerWidth(); 

$(window).resize(setContainerWidth);

a fiddle看看它是如何工作的。

來源

2015-02-11 16:36:29

雅，即使我不得不用JavaScript來做，但我正在尋找一些純粹的CSS和HTML方式。仍然，thanx – 2015-02-11 20:04:39

因此，可能你可以嘗試修復它使用一些CSS媒體查詢[響應式設計]（http://www.toptal.com/front-end/introduction-to-responsive-web-design-pseudo-elements -media-queries） – 2015-02-12 08:28:31

Ya，但沒有最大寬度限制！即使我將其設置爲1200px或1400px，但如果屏幕更大，該怎麼辦？？我無法將其包裝在1200px寬度或更大的屏幕中的父容器中 – 2015-02-12 08:42:43

在未知寬度的父容器中集中固定寬度的子元素

回答

相關問題