0

私は約 500 ページからなる本を書いています。各ページには「a」「b」「c」の 3 つのセクションが含まれています。各ページでは、各セクションのコンテンツの長さが異なります。たとえば、ページ 1 では、長い「a」があり、「b」がなく、短い「c」があります。ページ 2 には、中程度の「a」、短い「b」、長い「c」などがある場合があります。

各ページの各セクションの内容は、HTML 形式で提供されます。

ページ領域が効率的に使用されるように、ページ上のセクションをレイアウトしたいと思います。これは、私が防ぎたい非効率的なレイアウトの例です。

aaa bbb ccc
aaa     ccc
aaa     ccc
        ccc
        ccc

ご覧のとおり、無駄な領域がたくさんあります。

最初に、コンテンツの長さに応じて列の幅を制御しようとしました。たとえば、次のようになります。

aaa b ccccc
aaa b ccccc
aaa b ccccc

これはより効率的ですが、列「b」は狭すぎて読みにくいです。

私が試したもう1つのことは、幅を一定に保ちながら「フロート」レイアウトを使用することです。たとえば、列「a」と「b」のみがあるとします。

aaa bbb 
aaaaaa

列が 2 つしかない場合、これは非常に単純になります。

  • a が b よりもはるかに長い場合、b を右にフロートさせます。
  • b が a よりもはるかに長い場合は、フロートを左にします。
  • それらがほぼ同じ長さである場合は、2 つの隣接する列にします。

ただし、3 つの列がある場合は、可能な組み合わせが多数あるため、これはさらに複雑になります。

この問題の一般的な解決策はありますか?

4

1 に答える 1

2

jQuery Masonryをご覧になることをお勧めします。あなたが探しているものとは違うかもしれませんが、役に立つかもしれません。

于 2012-09-08T18:31:42.743 に答える