3

幅950pxのボックスがあります。

このボックス内に、最大4つの潜在的な列が必要です。

4つの列すべてが使用されている場合、各列はスペースの約25％を占める必要があります。

ただし、3つだけを使用している場合は、33.33 ..％を占めるように拡張するか、2つの列のみを使用している場合は、それぞれを50％にし、1つを使用している場合は100％を占めます。スペースの。

私が達成しようとしている動的な性質のため、標準の固定幅の4列レイアウトを使用することはできません。

ベローは私がこれまでに達成したことです。その結果、列が互いに積み重ねられます。私が言ったように、私はそれらがそれらの中にあるものに応じて拡大したり折りたたんだりできる必要があるので、固定幅の列を持つことはできません。

.bottomboxwrapper   {
    width:950px;
    display:block;
    background-color:#6F0;
    overflow:hidden;
}
.bottomone  {
    float:left;
    background-color:#CCC;
    width:auto;
    display:inline-block;
    width:auto;

}
.bottomtwo  {
    float:left;
    width:auto;
    background-color:#999;  
    display:inline-block;
    width:auto;

}
.bottomthree    {
    float:left;
    background-color:#666;
    display:inline-block;
    width:auto;
}
.bottomfour {
    float:left;
    background-color:#C99;
    display:inline-block;
    width:auto;
}


<div class="bottomboxwrapper">
<div class="bottomone">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p>
</div>
<div class="bottomtwo">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p>
</div>
<div class="bottomthree">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p>
</div>
<div class="bottomfour">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien.
 </p>
</div>
</div>
4

2 に答える 2

1

CSS でこれを行う最も簡単な方法は、display: table/を使用することdisplay: table-cellです。追加table-layout: fixed すると、同じ幅の列が確保されます。

HTML の例を次に示します: http://jsfiddle.net/thirtydot/N4BUh/ (またはfullscreen )

.bottomboxwrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.bottomboxwrapper > div {
    display: table-cell;
}

この手法の唯一の欠点は、IE7display: table ではサポートされていないことです。

IE7 を修正する JavaScript ポリフィルが利用可能です: http://tanalin.com/en/projects/display-table-htc/

于 2012-05-22T21:15:08.550 に答える
0

CSS のみでできることは、このような列をネストすることだと思います。

.one .col {
   width:100%;
}
.two .col {
   width:50%;
}
.three .col {
   width:33.33%;
}
.four .col {
   width:25%;
}

その欠点は、必要な列の数を事前に把握し、HTML でクラス名 (または番号) を呼び出す必要があることです...しかし、少なくとも単一のクラス「1」のみを変更します。 「二」など

    <div class="two">
       <div class="col">50% wide</div>
       <div class="col">50% wide</div>
    </div>

   <div class="three">
       <div class="col">33.33% wide</div>
       <div class="col">33.33% wide</div>
       <div class="col">33.33% wide</div>
    </div>
于 2012-05-22T20:37:55.383 に答える