0

HTML コンテナーをその子の 1 つの幅に合わせる方法を探しています。

わかりました。これは、設計上、既にこのように機能しています。

しかし！また、「text-overflow: ellipsis」で折りたたむ別の子が必要です。問題は、このようなプロパティを適用するには、この子を「display: block」モードにする必要があることです。これにより、コンテナーの幅が拡大されます。

私が探しているものを達成するための秘密の時間はありますか?

JsFiddleを入手できない場合、または試してみたい場合に備えて、ここにJsFiddle があります。

編集：ちなみに、これは重要です。私は特に Internet Explorer 10 をターゲットにしています。

4

1 に答える 1

0

ワトソンが言ったように、「縮小して合わせる」CSS ルールはありません。したがって、次の 2 つの選択肢があります。

  1. .overflow 要素のサイズを手動で静的に設定します。したがって、幅:100% の代わりに、幅:330px を入力します。

  2. JavaScript を使用して、.overflow 要素のサイズを動的に変更します。（複数あると思います。）あなたは、最大の内部divに縮小したいと言いました。縮小したい div がいくつかあるが、それらの最大のものに縮小したいとします。まず、これらすべてを次のようなクラスに設定します。 

    .good-width{
    border: solid 2px salmon;
    width:auto; /* necessary for some browsers' offsetWidth */
    display:inline-block; /* gives it the width of the contents */
}

そして、ページの上部に次のような JavaScript を配置します。

var goods = document.getElementsByClassName('good-width');
//collect the widest one's width
var maxwidth = 0;
for(var x = 0; x < goods.length; x++) {
    if(goods[x].offsetWidth > maxwidth) {
        maxwidth = goods[x].offsetWidth;
    }
}
//set the width of the overflow divs to match
var overflows = document.getElementsByClassName('overflow');
for(var y = 0; y < overflows.length; y++) {
    overflows[y].style.width = maxwidth + 'px';
}

私が誤解していて、特定のオーバーフローを特定の適切な幅に一致させようとしている場合は、各要素に id を割り当てて、そのようにする必要があります。

document.getElementById('overflowID').style.width = document.getElementById('good-widthID').offsetWidth + 'px';

もしそれが私のウェブサイトなら、javascript を持っていない人にとって少なくとも適切に見えるようにするために、実際には #1 と #2 の両方を組み合わせます。つまり、あまり離れていないオーバーフローのものに静的な幅を設定し、可能であれば JavaScript がそれを上書きできるようにします。

于 2012-07-16T20:49:17.210 に答える