4

私の問題のタイトルがはっきりしていなくて申し訳ありません。解決策を探しているときに適切な名前を見つけようとしましたが、正確な説明方法が見つかりませんでした。

左にフロートし、インライン ブロックのように動作する必要がある固定サイズの div があります。ページの右側にコンテンツ領域があります。私が何を意味するかを示す例を次に示します: http://jsfiddle.net/7sp5M/。結果領域の div の幅を変更しようとすると、ブロックの領域に合わせようとします。問題は、ブロックの領域とコンテンツ領域の間にギャップがあることです。最小幅のコンテンツ領域が必要で、このギャップを埋めるために領域を水平方向に拡大したい: http://img89.imageshack.us/img89/296/floatingdivs001.png .

たとえば、ブロックの幅は 100px です。最小コンテンツ領域は 200px にする必要があります。また、ブロックの領域の幅に応じて、コンテンツの幅を 200px から 299px まで変える必要があります。

純粋な HTML/CSS でこのような動作を実装することは可能ですか? テーブルを避けるための制限はないので、機能するアプローチはどれも適切です。

更新：コメントありがとうございます。純粋な HTML/CSS で実装することは実際には不可能のようです。私はまだCSSが得意ではないので、それについては確信が持てませんでした。このような動作を JavaScript と jQuery で実装したところ、必要な方法で動作します。

4

3 に答える 3

2

通常、ブロック div 内に内部コンテナーを配置して、幅に影響を与えずにパディングを割り当てることができるようにします。

.block { width: 20%; }
.block > .inner { padding-left: 10px; }
.block:fist-child > .inner { padding: 0; }
<div class="block">
    <div class="inner">
        block
    </div>
</div>
于 2012-09-13T08:24:40.820 に答える
1

display: table;とでこれを行うことができますtable-cell;

#mainラッパーに CSSdisplay: table; とその子を与える必要がありますtable-cell;。そして、div.rightマークアップをdiv.left

 <div class="left">
        <div class="block">Block1</div>
        <div class="block">Block2</div>
        <div class="block">Block3</div>
        <div class="block">Block4</div>
        <div class="block">Block5</div>
        <div class="block">Block6</div>
    </div>
    <div class="right">Content</div>

ブロックの幅は好きなように調整できるので、100%/6=16%16% を使用しました。動的な幅が必要な場合は、幅の宣言を省略できます。使用可能なサイズに自動的にサイズ変更されます。これはテーブルの動作を模倣していますが、依然としてセマンティック マークアップです。

#main
{
    width: 100%;
    display: table;
}

.right {
    display: table-cell;
    width: 200px;
    height: 300px;
    background: #888;
}
.left {
    overflow: hidden;
    height: 300px;
    background: #ccc;
    display: table-cell;
}
.block {
    width: 16%;
    height: 50px;
    float: left;
    border: 1px solid blue;
    display: table-cell;
}​

http://jsfiddle.net/Kyle_Sevenoaks/7sp5M/31/

于 2012-09-13T08:29:01.667 に答える
1

これを試すことができます：

<div id="main" class="">
<div class="right">Content</div>
<div class="left">
    <div class="clearfix"></div>
    <div class="block">Block1</div>
    <div class="block">Block2</div>
    <div class="block">Block3</div>
    <div class="block">Block4</div>
    <div class="block">Block5</div>
    <div class="block">Block6</div>
</div>

</div>

CSS で:

.right {
  float: right;
  min-width: 200px;
  height: 300px;
  background: #888;
 }

.left {
  overflow: hidden;
  height: 300px;
  background: #ccc;
  width:300px;
  float: left;
 }

.block {

   width: 100px;
   height: 50px;
   float: left;
   border: 1px solid blue;
}
.clearfix{
   clear:both;
}

そして、divの幅を変更するためにJQueryを使用しました

$(document).ready(function(){

   var left_width = $(".left").width();
   var block_width = $(".block").width()+2;

   var count = Math.floor(left_width/block_width);

   var calc_left_width = count * block_width;
   var calc_right_width = $("#main").width() - calc_left_width;

   $(".left").width(calc_left_width);
   $(".right").width(calc_right_width);

});

境界線を考慮するためにブロックの幅に 2 を追加しました。outerwidth() を代わりに使用できます。ここで、それが機能しているのを見ることができます

于 2012-09-13T10:34:39.797 に答える