1

親 div があります。その div 内には、次のように 2 つのレベルの子 div があります。

<div class="grandParant">
    <div class="parant1">test</div> 
    <div class="parant2"> 
        <div class="child">Hello world this is a long test string</div>
         <div class="child">12</div>
         <div class="child">4545</div>
    </div>
</div>

上記のサンプル コードから、最初の「子」クラスの内容全体 (Hello world これは長いテスト文字列です) を途切れることなく、つまり 1 行で表示する必要があります。「parant2」div の幅も、子の幅に対してインクリメントする必要があります。では、これをcssでどのように行うことができますか? css は少し長いので投稿しませんが、jsfiddle で確認できます。

EDIT 私の予想される出力は、アルファベットの「L」に似ています

| test |
| Hello world this is a long test string |
| 12                                     |
| 4545                                   |

私のjsfiddle

4

5 に答える 5

1

「max-width」を削除することでそれを行うことができます...

「max-width」を指定すると、その範囲までしか取得できず、その幅を超えると行が途切れます

のようにcssのみを入れてください

min-width:100px;

ここにフィデルがありますhttp://jsfiddle.net/9Sha7/8/

于 2013-03-21T12:49:43.280 に答える
1

max-width祖父母の外側のテイクを削除すると、parant1ラップしないという望ましい結果が得られます。

デモ: http://jsfiddle.net/9Sha7/18/

于 2013-03-21T12:49:47.510 に答える
0

クラスから削除max-widthして、.grandParentクラスに渡しwhite-space:nowrap;ます.child。

ワーキングフィドル

于 2013-03-21T13:01:37.837 に答える
0

すべてのwidth属性とmax-widthを削除するだけで、要件に応じて問題がないはずです：http: //jsfiddle.net/9Sha7/13/

于 2013-03-21T12:55:31.813 に答える
0

詰め物を取り出す

.grandParant{
margin:0 auto;
float:left;
min-width:100px;
max-width:120px;    
height:150px;
position:relative;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background:#cccccc;
font-size:11px;
cursor:pointer;    
}
.parant1{
    width:auto;
margin-bottom:22px;

text-align:center;
    background:blue;
}
.parant2{

text-align:left;
width:auto;
background:#f3f3f3;
}

.child{
     width:100%;
position:static;
background:green;
}
}
于 2013-03-21T12:51:30.747 に答える