0

画像、タイトル、ボタン、ソース コードで構成されるリストを作成していますが、残りの幅を 100% 使用することに問題があります。

私の主な問題は<textarea>、残りの幅と高さをすべて使用できないことです。

ここに私が得ているものがあります: ここに画像の説明を入力

そして、私が持っているつもりのもの： ここに画像の説明を入力

ソースコードの下に、CSS:

.listing {width:100%;background:#f1f1f1;display:table;}
.leftimage {clear:none;display:table-cell;padding:20px;}
.listing .information {padding: 20px;width:100%;display:table-cell;}
.listing .information .title {font-size:20px;color:#016b98;}
.listing .information .title a {color:#016b98;text-decoration:underline;}
.listing .information .outsideButton {float:left;padding-top:5px;padding-right:5px;clear:none;}
.listing .information .outsideButton {clear:right;}
.listing .information .outsideButton .button {border: 1px solid #626262;background:#d8d8d8;}
.listing .information .outsideButton .button .label {padding:5px;}
.listing .information .outsideButton .button .label a {color:#626262;}

HTML:

<div class="listing">

                    <div class="leftimage">
                        <div style="height:150px;"><!-- Allows to change image position on click without changing .listing size -->
                            <a><img class="preview" height="150px" src="img.png"></a>
                        </div>
                    </div>

                    <div class="information">
                        <div class="title">
                            <a>TITLE</a>
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 2</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 3</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 4</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 5</a>
                                </div>
                            </div>                              
                        </div>
                        <!-- END OF BUTTONS -->

                        <!-- HERE I WANT TO DISPLAY THE TEXTAREA WITH HTML CODE -->
                        <div style="float:left;padding-top:10px;clear:left;width:100%;">
                            <textarea style="padding:0;margin:0;width:100%;"><?php echo htmlspecialchars("<div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?></textarea>
                        </div>
                        <!-- END OF TEXTAREA WITH HTML CODE -->

                    </div><!-- END OF .information -->
                </div>

ありがとう。

解決策：vertical-align:top;テーブルセルごとに 設定

4

2 に答える 2

0

最初に、コンテナー div に残りのスペースを取得するように指示し、次に textarea にその親のすべてのスペースを取得するように指示する必要があります。それぞれに「幅: 100px」を追加します。

<div style="float:left;padding-top:10px;clear:left; width:100%">
<textarea style="padding:0;margin:0; width: 100%"><?php echo htmlspecialchars("<div>    <span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?>
</textarea>
</div>
于 2013-06-22T23:20:42.643 に答える
0

私のコメントでも言及されているように、これは同じ結果を達成するのに役立ちますが、フロートをまったく使用しません。

列が固定されていないHTML動的レイアウトのCSS?

プロパティを使用しdisplay: table;てレイアウトを構築し、display: table-cell;width: 100%<textarea>

編集：

ボタンにはまだフロートを使用しています-正しくクリアします-たとえば、それらを a でラップし、<div class="clearfix">この css を使用します:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

編集：

この質問を参照している場合: 2013Asker で指摘されているようにvertical-align:、使用時に設定することを忘れないでくださいdisplay: table-cell

于 2013-06-23T00:24:21.727 に答える