子divが親よりも広いかどうかを検出しますか？

Question

複数の子divが親よりも広いかどうかを検出するにはどうすればよいですか？この場合、幅が広いと、最も右のものが左端の下に表示されます。私はjsを使用してオーバーフローをチェックしようとしましたが（ここで説明されているように：javascript css check if overflow）、動作しません。

最終的には、右端のdivを兄弟の下に置き、パディングを変更したいのですが、幅が広い場合に限ります。

コードは、基本的にはこれです：

は

<div class='parent'> 
    <span>title</span><br /> 
    <div class='child'> 
    Some content. 
    </div> 
    <div class='child'> 
    More content that sometimes doesn't fit. 
    </div> 
</div> 

Answer 1

これは、子の幅を比較すると、あなたのdivの親幅

$('.parent').children('.child').each(function() { 
 
    let $this = $(this); 
 
    console.log($this.width(), ' ', $('.parent').width()); 
 
    if ($this.width() > $('.parent').width()) { 
 
    //add the padding you want 
 
    $this.css('padding-top', '10px'); 
 
    } 
 
})

.parent { 
 
    width: 500px; 
 
} 
 
.child { 
 
    background-color: green; 
 
    width: 700px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class='parent'> 
 
    <span>title</span> 
 
    <br /> 
 
    <div class='child'> 
 
    Some content. 
 
    </div> 
 
    <div class='child'> 
 
    More content that sometimes doesn't fit. 
 
    </div> 
 
</div>

Answer 2

ないように注意してください、あなたはそれを試してみましたか？

var children = YourParentDiv.children; 
    for (var i = 0; i < children.length; i++) { 
     var child_width=children[i].offsetWidth; 
     var parent_width = children[i].parentElement.offsetWidth; 
     if (child_width>parent_width) 
     {console.log('wider');} 
    }