0

次のようにフォーマットしようとしている固定幅のコンテナにコンテンツがあります。

Description: [button][button]

基本的に、説明ラベルが 50%、ボタン コントロールが 50% を占めます。説明を次のようにフローティングすることでこれを行っています。

<div style="width: 300px;">
  <div style="width: 145px; margin-right: 5px; float: left;">Description:</div>
  <div>[button][button]</div>
</div>

ボタンが右側に収まりきらない場合は、次のように折り返すのではなく、次のようにします。

Description: [button][button]
[button][button]

レイアウトを次のようにしたいと思います。

Description: 
[button][button][button][button]

したがって、基本的に、説明ラベルを 50% 幅に保ち、コントロールをアンラップし、上記の両方のケースを処理する単純なレイアウトを考え出すのに苦労しています。私は単純なものが欠けていると確信しています - 何かポインタはありますか?

4

2 に答える 2

1

私のデモは JsBIN で見ることができます

プロパティを使用してwhite-space改行を防止します。

于 2013-01-21T22:23:25.513 に答える
1

この jsFiddle http://jsfiddle.net/UGEBM/1/white-spaceで見られるように、との組み合わせを使用できます。float

于 2013-01-21T22:24:51.003 に答える