獲得父div的寬度等於最寬Child元素/ div

就我的理解而言，如果未定義div的寬度和高度屬性，Parent div將等於排列的子元素的寬度和高度屬性的結果（分別添加）。獲得父div的寬度等於最寬Child元素/ div

我的當前設置是像這樣：

<div> //container 
    <div> //list of each element 
    <div> // element 1 
     ... children comprised of on SVG and a few other divs 
    </div> 
    <div> // element 2 
     ... children comprised of on SVG and a few other divs 
    </div> 
    <div> // element 3 
     ... children comprised of on SVG and a few other divs 
    </div> 
    …etc… 
    </div> 
</div>

我的問題是，width S中的元素的div沒有得到設定（或更新）正確。 div的寬度應該是子SVG的寬度（因爲它是最寬的），div的高度應該是子div的高度（其中2個）和SVG的高度。

這是本例的fiddle。您會注意到該示例正在被切斷。該div的計算寬度爲300，儘管其SVG較大（拖動以查看其餘部分）

JQ-UI正在運行，因此在用戶操縱表示的大小後，其他人將重新呈現自己。如果我們可以找出div爲什麼呈現爲300px，那麼它也將修復重新渲染，因爲它將基於它的子元素。

看來這個問題也可能與SVG本身有關。我沒有定義SVG的寬度和高度屬性，而是我在CSS上這樣做了。如果我在調整大小時操作SVG寬度屬性，它似乎可能工作，但我仍然不確定爲什麼SVG的寬度沒有被計算，然後適合div。

來源

2013-08-28 chris Frisina

您在此處顯示一些代碼，但在小提琴演示中有些不同且更復雜，請縮小小提琴演示中的代碼以指示問題本身。 –

我沒有得到的部分是如何沒有jquery我認爲，外部div保持內容的大小，但是當達到父母它保持與父母的大小。 –

問題確實在於SVG。該屬性必須在HTML標籤內聯定義，而不是由CSS定義。這看起來很奇怪，但通過在這裏設置SVG屬性，JQ-UI將在這裏調整SVG屬性，但如果沒有開始，瀏覽器將確定其原始尺寸。

<div> //container 
    <div> //list of each element 
    <div> // element 1 
     <svg width="300px" height="100px"></svg> 
    </div> 
    ....

來源

2013-09-07 13:33:05

問題是你得到div錯誤。 Div元素是塊元素，塊元素擴展爲父寬度的寬度。

您可以使用彈性盒模型。

使用內聯框。

使用jquery來定義寬度。

http://fiddle.jshell.net/DVhQA/

<div class='m'> 
    <div></div> 
    <div></div> 
</div>

然後

div { 
    border:solid; 
    /* overflow:auto; */ 
    display:inline-block; 
} 

div>div { 
    margin:10px; 
    float:left; 
    clear:both; 
    height:50px; 
    width:200px; 
    background-color:red; 
} 
div>div:first-of-type{ 
    width:500px; 
    background-color:yellow; 
}

來源

2013-08-28 17:45:34

每個父容器都有「display：inline：block」，所以這不是問題 –

當<div>沒有定義其寬度和高度，這兩個屬性都設置爲auto。

當塊級元素（如<div>）的寬度爲auto時，它將展開到其包含元素中的可用水平空間。如果它的孩子更寬，比規範說他們應該突出，但他們不會影響父母的寬度。（當天有一個令人討厭的IE錯誤，它沒有遵循這個使浮動佈局非常難實現的規範）。

當塊級元素（如<div>）的高度爲auto時，它將垂直擴展以包含處於文檔流中的所有子級。

您需要更改默認行爲。對於要展開每個家長，每個孩子它的，你將需要申請display:inline-block;

div.parent, div.child1, div.child2{ 
     display:inline-block; 
}

來源

2013-08-28 17:46:56

你的問題在於DIV measure-container-c30。

它的寬度設置爲89％。

這是奇怪的，如果你想圍繞div使用保證金。

這樣做：

上measurec29格刪除所有寬度的風格。
刪除width: 89%;overflow: auto; on measure-container-c30 div。
刪除寬度measure-rep-container-c29格。

來源

2013-08-29 01:53:30

獲得父div的寬度等於最寬Child元素/ div

回答

相關問題