1

別の要素にネストされた 3 つの div 要素があります。

<div id="master" style="width:100%">

<div id="child1">Content1</div>
<div id="child2">Content2</div>
<div id="child3">Content3</div>

</div>

今#masterはレスポンシブ div です。ピクセル幅はウィンドウ サイズによって異なります。width:33.333%コンテンツがラップされないことを条件に、各子 div が必要です。コンテンツが折り返される場合は、幅を100%.

コンテンツは可変であるため、従来のメディア クエリは使用できないことに注意してください。どうすればこれにアプローチし始めることができるか、誰にも考えられますか?

4

4 に答える 4

1

まずはすべての
divにCSSを適用してみて、

#master{
    width:100%;
    }
#child1, #child2, #child3{
    width:33.33%;
    display: inline-block;
}

これに加えて、JavaScript を使用して要件を満たすことができます</body>。この JavaScript を以下に含める必要はありません。

var child1 = document.querySelector('#child1');
var child2 = document.querySelector('#child2');
var child3 = document.querySelector('#child3');

if((child1.offsetHeight < child1.scrollHeight) || (child1.offsetWidth < child1.scrollWidth)&&(child2.offsetHeight < child2.scrollHeight) || (child2.offsetWidth < child2.scrollWidth)&&(child3.offsetHeight < child3.scrollHeight) || (child3.offsetWidth < child3.scrollWidth)){
    // your element have overflow
    child1.style.width = "100%";
    child2.style.width = "100%";
    child3.style.width = "100%";
}
else{
    //your element don't have overflow
}
于 2013-09-07T12:02:47.910 に答える
0

min-widthプロパティを使用してみてください。

ブロックがそれを超えるとmin-width、2 行目にドロップされます。

#child1, #child2, #child3{
    width:33%;
    min-width: 200px;
    display:inline-block;
}

これが役立つことを願っています。

于 2013-09-08T13:40:00.327 に答える