8

私はWebアプリケーション（asp.net mvc3）に取り組んでいます

私はメインディビジョンを持っています。そのメインdiv内にたくさんのdivを追加したいと思います。

しかし、私はそれらを次のようにしたいと思います。Divは行上で隣り合って表示され、スペースがなくなると、次のdivは新しい行に折り返されます。（テキストを書くのと同様に、この行にスペースがなくなると、次の単語は新しい行に折り返されます）

display: inline;隣同士に表示するために使用しようとしましたが、メインdivの終わりに達したときにどのようにラップさせることができますか？

位置をハードコーディングせずにそれを行う方法はありますか？divは動的に追加されるため、divの大きさや数がわかりません。

ありがとう

4

3 に答える 3

11

試してくださいdisplay: inline-block- http://jsfiddle.net/7FJRr/1/

更新IE7がまだ懸念される場合：

div {
    display: inline-block;
    zoom: 1; 
    *display: inline;
}
于 2012-06-11T13:51:13.800 に答える
1

これはあなたが意味するものですか？

http://jsbin.com/uzoruq/edit#javascript,html,live

以前float:leftはコンテンツ div を配置していました

divをラップするソリューションは知りませんが、これによりdivがインラインになります

編集

スパンを使用する場合は、次のようにすることができます。

http://jsbin.com/uzoruq/2/edit

display:inlineスパンに使用しました。

于 2012-06-11T13:53:18.257 に答える
1

フレックスの助けを借りてそれを行うことは可能です。

display: flex;
flex-wrap: wrap;

例えば：

.flex{
  width: 5rem;
  background: yellow;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex > div{
  width: 2rem;
  background: black;
  color: white;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

于 2021-11-20T18:36:37.847 に答える