0

この質問はよく聞かれましたが、これまでのところ解決策はありませんでした。 formの幅は 100% に設定されholderており、相対的な幅は 10% です。今度はすべての「空き」幅を で埋めたいと思いinput_editます。誰かが私を助けることができますか？ありがとうございました！！

ここに私のHTMLがあります

<form>
    <textarea rows="4" name="in" class="input_edit"> </textarea>
    <div id="holder"></div>
</form>

そして私のCSS

form {
width: 100%;
overflow: hidden;
} 
.input_edit {

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; 

width: auto;

background-color: transparent;
box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
border: 5px solid #666; 
margin: 5px;
border-radius: 5px;
height: 60px;

float: left;

}
#holder { 
border: 5px dashed #666; 
border-radius: 5px;

margin: 5px;
width: 10%; 
height: 60px; 
float: right;
}

編集：

holder今のところ10％ですが、モバイルデバイスなどで非表示にしたいので、100-10 = 90％で作業できません。また、問題はbox-sizing

4

2 に答える 2

1

CSS3width: calc(90% - 30px);は機能しますが、それをサポートするブラウザーの数はかなり限られています。

次善の策は、おそらく jQuery (または JavaScript) を使用して正しい幅を手動で計算することです。何かのようなもの：

 $(".input_edit").width($("form").width() - $("#holder").width() - 40);

そして、幅がform変わるたびに更新します。

于 2013-02-03T00:40:45.647 に答える
0

.input_edit と #holder のマージンを削除し、box-sizing: border-box; を適用する必要があります。それらの要素に。

ボーダーボックスは、余白ではなく、パディングとボーダーを 10% & 90% に配置します。ガターの作成方法については、次のビデオをご覧になることをお勧めします: http://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/

あなたの多くの質問に答えてくれると確信しています。

于 2013-02-03T00:30:48.493 に答える