5

このサイトには「利用可能なスペースを埋める」という質問がたくさんありますが、私の問題は、すでに解決策を得ているという点で少し特殊ですが、ボタンでは機能しません。これがボタンで機能しない理由と、それを機能させる方法を理解したいと思います。オーバーライドする必要があるのは、ボタン要素のブラウザスタイルにすぎないと思います。

（重要な場合は固定幅の）ラッピングdiv内に2つのフローティング要素があります。右側の要素の幅は固定されており、左側の要素は残りの幅を占める必要があります。

これは、右側の要素を固定幅とに設定しfloat: right、左側の要素を特別なスタイルなしで残すことで実現できます。これはdivに対して完全に機能します。スパンでも機能しますが、設定display: blockした場合に限ります。ボタンについては、まったく機能しません。ブロック、インラインブロック、およびwidthMDNで見つけたすべてのあいまいな値を試しました。

http://jsfiddle.net/wjFbD/2/

以前にボタンをdivでラップすることを考えなかった理由はわかりません。これが私が思いついたものです：

http://jsfiddle.net/SkczB/2/

これには、overflow: hidden ボックスの書式設定コンテキストのトリックが含まれます（これは、ここに表示されると思われましたが、どこに収まるかがわかりませんでした）。ハイライト：

  1. 2つのボタンは、クラスbuttonWrapperを使用してdivでラップされます。
  2. これらのdivは、上記の3番目の段落で概説したトリックに従ってフォーマットされています。右のdivにはフロートがあります。右と固定幅、左のdivには特別なスタイルはありません。
  3. ここで、ボックスフォーマットコンテキストトリックを適用します。左側のdivにはoverflow：hiddenが与えられます。これにより、右側にフローティングされたdiv用のスペースが作成されます。
  4. これで、左マージンを右divに適用し、その幅を変更できます。左divは常に正しいサイズになります。
  5. divは、必要な「使用可能な幅を埋める」効果を作成します。これで、ボタンをdivの内側に配置し、高さと幅を100％にする必要があります。
  6. 幅を固定したいのが左ボタンの場合は、基本的に、左右を入れ替えて上記の手順を繰り返します。
4

3 に答える 3

2

これはあなたがここで探しているものとは正確に一致しないかもしれませんが、ここにあなたのフィドルで私のためにうまくいったように見えるオプションがあります。

要素が含まれる固定幅のdivがある場合は、ボタンAが100ピクセルになるように設定された後、divの残りの幅を分割して取得し、ボタン2を残りのサイズに設定できます。 。

あるいは、別のオプションは、20％/ 80％、30％/ 70％のパーセンテージで実行することです。これは、下部のボタンラッパーだけで探しているものを実現するフィドルです。私はそれに特定のクラスを適用し、もう少し制御するために各ボタンの周りにdivを追加しました。ボタンラッパーのdivはそれぞれ20％と80％に設定されていますが、ボタンは含まれているスペースの100％を埋めるように設定されています。

これが修正されたフィドルと修正されたHTML/CSSです。それがあなたが探しているものに役立つことを願っています...

http://jsfiddle.net/wjFbD/7/

HTML

<div class="btnWrapper">
    <div class="buttonWrapperB">
    <button class="left">
        button Left
    </button>
    </div>
    <div class="buttonWrapperA">
    <button class="right">
        button Right
    </button>
    </div>
</div>​

CSS

.btnWrapper
{
    width: 100%;
    background-color: #FEE;
    border: 2px solid black;
    margin-bottom: 10px;
    height: 50px;
}

.buttonWrapperB{
    float: left;
    width: 20%;
}
.buttonWrapperB button{
    width: 100%;
    height: 50px;
}

.buttonWrapperA{
    float:left;
    width: 80%;            
}

.buttonWrapperA button{
    width: 100%;
    height: 50px;
}

</ p>

于 2012-12-19T18:42:01.913 に答える
0

.right要素の下で何が起こっているかを確認するために、要素の背景の不透明度を調整しました。.left要素が残りのスペースを占有しているだけでなく、行全体を占有しているように見えます。奇妙なことに、これらの要素内のテキストは、残りのスペースだけを占めているかのように中央に配置されます。

同じことがボタンでも機能するようにしたい場合、唯一の解決策は少しハックする必要があるようです。ボタンは確かに非常に複雑です。

button.left {
  margin: 0;
  position: absolute; /*this seems to be the only way to get the button to stay on the same row - floating it left won't even work*/
  z-index: -1; /*hides the "overflowing" part below the right button*/
  width: 100%; /*make the button stretch to the full width of the row*/
  padding-right: 400px; /*add a padding-right hack so that text will be centered correctly - should be same size as fixed width .right element*/
  padding-left: 0;
  display: block;

}

更新されたフィドルを参照してください：http：//jsfiddle.net/wjFbD/6/

于 2012-12-19T18:39:32.903 に答える
0

で始まります

一方の要素の幅は固定されており、もう一方の要素は残りの幅を占める必要があります。

これが私の一般的な解決策です：

ここに画像の説明を入力してください

<div class="container">
    <div class="two">125&thinsp;€&lt;/div>
    <div class="one">my favorite provider</div>
</div>

(stylus syntax, in your mind just add {,},;)

.one // red
    border none
    height auto

    overflow hidden
    white-space nowrap
    text-overflow ellipsis
.two // green
    float left
    white-space nowrap
    text-overflow ellipsis

1つの緑色のものを固定幅に設定できますが、実際、そうする必要はありません。物事はうまくいっぱいになります。また、文字列が長くなりすぎると、省略記号で切り捨てられます。

<button>それらの1つがではなく<div>（そして、どのスタイルプロパティがそれらを区別するのかわからないので、スタイルを変更する必要がある）、物事は少し複雑になりますが、とにかく、ラッパーを使用すると、それも機能します：

ここに画像の説明を入力してください

→ここで完全なcodepenを参照してください。（フィードバックを歓迎します。）

于 2017-10-31T14:19:20.777 に答える