2

私は、かなり簡単なはずだと思っていた問題に困惑している「瞬間」を少し過ごしています（そしておそらくそうです、私は確かに複雑になりすぎています）。

私はdiv複数の子供を持つことを探していdiv'sます。子は、存在する数に基づいて自動的に拡大または縮小する必要があります (私が取り組んでいるサイトは、ユーザーがアイテムを追加または削除できる CMS にあります)。

私の問題はdiv's、最小幅と最大幅の宣言を尊重することです。私は、それらがfloat:left.

私の主な目的は、これらの列を最大 4 列の 1 つの「行」でスペースを埋めることです。

編集:これらの列を最小幅と最大幅にする必要があります。したがって、子が 3 つある場合はdiv's、子が 4 つある場合よりもすべての幅が広くなるはずdiv'sです。

これが私のコードの例です: http://codepen.io/joe/full/IJvGp

HTML

<div class="sub cf">
  <div class="row">
      <div class="col">
          Column 1
      </div>

    <div class="col">
        Column 2
      </div>

      <div class="col">
        Column 3
    </div>

    <div class="col">
        Column 4
    </div>
  </div>
</div>

CSS

.sub {
  width: 670px;
  background: #fff;
  border: 10px solid #414042;
}

.sub .row {
  padding: 0;
  float: left;
  width: 100%;
}

.sub .row .col {
  min-width: 166px;
  max-width: 222px;
  width: 100%;
  float: left;
  border-right: 1px solid #D0D2D3; 
  margin: 0;
  padding: 0;
}


.cf::before, .cf::after {
  content: "";
  display: table;
}
.cf::after {
  clear: both;
}
4

6 に答える 6

1

CSS3 ソリューション

minとmaxwidths を削除しますが、それにプロパティを.col追加します。次に、このフィドルで結果を生成する定義box-sizing: border-boxの下に次のコードを追加します。.col

.sub .row .col:nth-last-of-type(2),
.sub .row .col:nth-last-of-type(2) ~ .col
{
   width: 50%;
}

.sub .row .col:nth-last-of-type(3),
.sub .row .col:nth-last-of-type(3) ~ .col
{
   width: 33.3%;
}

.sub .row .col:nth-last-of-type(4),
.sub .row .col:nth-last-of-type(4) ~ .col
{
   width: 25%;
}
于 2013-01-02T17:10:42.847 に答える
1

width:100%;アイテムのを削除すると.sub .row .col、4 列で表示されます。

とにかく、このアプローチの代わりにテーブルを使用する必要があるようです。

于 2013-01-02T16:57:07.477 に答える
1

jquery を使用すると、行内の列数に基づいて列幅を % として動的に設定できます。

var colWidth = (1 / $('.sub.cf .row').children().length * 100) + '%';
$('.sub.cf .col').outerWidth(colWidth);​

ワーキングフィドル。さらに列を挿入または削除し、再実行して動作を確認します。

于 2013-01-02T18:23:19.660 に答える
0

次のようなことを試すことができます：

HTML:

<div class="sub">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS:

.sub {
    text-align: justify;
    width: 670px;
    background: #fff;
    sborder: 10px solid #414042;
}

.sub div {
    display: inline-block;
    max-width: 166px;
    min-height: 100px;
    border-right: 1px solid #D0D2D3;
    margin: 0;
    padding: 0;
}

.sub:after {
    content: '';
    width: 100%;
    display: inline-block;
}
于 2013-01-02T17:04:20.890 に答える
0

ここでの主な問題はwidth: 100%とmax-width: 222pxです。あなたと一緒width: 100%に、子供のdivをできるだけ大きくしています。そして、max-width: 222pxそれらはすべて222px幅になります。親の div は 670px 幅なので、計算すると: 222px * 4 = 888px. 子 div の合計幅が親の幅を超えているため、最後の div が引き下げられています。

あなたが試すことができます： Codepen

IE8 のサポートにあまり関心がない場合は、ScottS ソリューションが最適です。

于 2013-01-02T17:20:54.777 に答える
-1

次のコードがあります。

max-width:222px;

収容できるように値を下げてください。

max-width:166px;

私のために働く！

于 2013-01-02T16:56:19.890 に答える