1

あなたの助けが必要です。

私の子div（テキストエリアとテキスト）が境界を越えて拡大しているようです： ここに画像の説明を入力

これは望ましい結果です: ここに画像の説明を入力

HTML/CSS は次のとおりです。

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
#one {
    width: 800px;
    border: 1px solid red;
}
#two {
    text-align: right;
}
#three {

}
#field {
    width: 100%;
}
</style>

</head>

<body>

<div id="one">

    <div id="two">text to the right</div>
    <div id="three"><textarea id="field"></textarea>

</div>

</body>

</html>
4

5 に答える 5

1

ボーダーとパディングが幅に追加されます。 幅が 100% であるため、パディングとボーダーがフィールドに追加されます。

したがって、幅が「1」の 120 ピクセルの場合、境界線に 2 ピクセル、パディングに数ピクセルが追加されます。

「3」からいくつかのスペースを差し引くと、これを達成できます。

#three {
    width:794px;
}

例

以下は、ほとんどのブラウザでも機能するはずです。

#field {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
}

それ以外の場合は、テキストエリアから境界線とパディングを削除できます。正直に言うと、これを行う方法はかなりあります。

于 2013-10-16T12:23:08.263 に答える
1

ボーダーとパディングtextareaが問題です。

二択

どちらの選択もテキストエリアの CSS に関連しています。また、以下のコードからわかるよう#oneに、ページのコンテキストで機能することを確認するために、相対配置も追加したので、テキストエリアの幅は実際にはこのコンテナーによってサイズ調整されます。

  1. box-sizingボーダーとパディングが含まれるように適切に設定します（ JSFiddle）：

    #one {
    width: 800px;
    border: 1px solid red;
    position: relative;
}
#two {
    text-align: right;
}
#three {

}
#field {
    width: 100%;
    box-sizing: border-box;
    /* let's also add these for cross-browser safety */
    border-width: 1px;
    padding: 2px;
}

  2. width100% 未満に設定( JSFiddle )

    #one {
    width: 800px;
    border: 1px solid red;

}
#two {
    text-align: right;
}
#three {

}
#field {
    /* (1px border + 2px padding) × 2 for left and right side */
    width: calc(100% - 6px);
}
于 2013-10-16T12:25:04.373 に答える
0

テキストエリアに設定width: 100%します。#fieldデフォルトでは、テキストエリアには および のゼロ以外の値もborderありpaddingます。したがって、すべてのテキストエリアは幅800 ピクセル(から継承.three) + 4 ピクセルの境界線 + 2ピクセルの境界線 = 806 ピクセルになります (ただし、使用するブラウザーによっては若干異なる場合があります)。
のCSS#fieldをこれに変更

#field {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

またmargin: 0、一部のブラウザでゼロ以外の値に設定されないようにするためだけに設定しました。

于 2013-10-16T12:24:08.237 に答える
0

国境を越える理由は、border:2px;

于 2013-10-16T12:22:01.720 に答える