2

image1つと1つをtextarea並べて表示する必要があります。ウィンドウのサイズが変更された場合でも、それらは常に並べて貼り付けられ、ウィンドウの幅全体に広がる必要があります (ちょっと反応します)。画像は固定サイズで、テキストエリアは一番右までの長さを占める必要があります。ウィンドウのtextareaサイズが変更されると、画像のインラインに収まるように幅が変更されます。以下は私のコードです：

//html
<div class="wrapper">
    <img width="30" height="30" alt="you" class="pic" src="http://www.frontiersin.org/Design/Images/default_profile.jpg"/>
    <textarea class="txt"></textarea>
</div>

//css
.wrapper {
    width : 100%;
    display : inline;    
}    

.pic {
    float : left;   
}

.txt {
    width : 100%;
    float : left;  
    height: 30px
}

ここにjsフィドルリンクがあります

ここに画像の説明を入力

4

4 に答える 4

4

画像のサイズが決して変わらない場合、これは他のソリューションと同じくらい優れたソリューションです。

http://jsfiddle.net/thirtydot/ACszc/22/

.wrapper {
    padding-left: 36px;
    position: relative;
}
.pic {
    position: absolute;
    top: 0;
    left: 0;
}
.txt {
    width: 100%;
    height: 30px;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
于 2013-08-19T14:22:29.783 に答える
4

テキストエリアをスパンのような要素でラップし、次の CSS を使用して、新しいブロック フォーマット コンテキストを作成する必要があります。

.wrapper {
    width : 100%;
    display : inline;
    float: left;
}
.pic {
    float : left;
    width:30px;
}
.txt {
    width : 100%;
    height: 30px;
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}

jsFiddle の例

于 2013-08-19T14:22:47.433 に答える
0

これをチェックしてください。

おそらく、幅のパーセンテージと高さを auto に設定すると、ここで役立つ場合があります。

.wrapper {
    width : 100%;
    display : block; 
    float: left
}


.pic {
    float : left; 
    width:3%;
    height: auto;
    line-height: 100%;
}

.txt {
    width : 95%;
    float : left;  
    height: 30px;
}
于 2013-08-19T14:30:17.553 に答える
0

テーブルを使用すると、かなり醜い場合でも、INPUT を処理するときに非常に効果的な場合があります。また、ブラウザをいじってはいけません:

<table style="width:100%;">
<tr>
    <td style="width:40px;">
        <img width="30" height="30" alt="you" class="pic" src="http://www.frontiersin.org/Design/Images/default_profile.jpg"/></td>
    <td style="width=100%;">
    <textarea class="txt"></textarea>
    </td>
</tr>
</table>

他の解決策が役に立たない場合は、それについて考えてください。

于 2013-08-19T14:31:44.430 に答える