divから画像を取り込む必要があります

divのの下に水平に配置された小さなアイコン画像のセットでdivをレンダリングしようとしています。 divの部分をレンダリングしようとしています。divから画像を取り込む必要があります

イメージの総ラインの幅が含まれているdivの幅よりも小さい場合、問題はありません。次のように「アイコントレイ」のCSSで

<div class="main-div" style="position: absolute; width: 700px; height: 600px"> 
Text text text ... 
    <div class="icon-tray"> 
    <img src="..."> 
    <img src="..."> 
    ... 
    </div> 
</div>

：私はこのようなコードを使用してい

div.icon-tray { 
    position: absolute; 
    bottom: 0; 
}

「主DIV」コンテナが固定された幅と高さで配置されています。上部のテキストと下部のアイコンの間には多くのスペースがあります。

上記のCSSは、画像の「アイコン・トレイ」divをメイン・ディビジョンの一番下に一列に並べて表示しています。

しかし、アイコンの数がすべて1行に収まらない場合は問題が発生します。レンダリングされたメインディビジョンは次のようになります。

 
-------------- 
|text text text ... 
| 
| 
| 
|X X X X X X X 
|X X 
--------------

"アイコントレイ" divは、イメージをTOPから1行ずつ並べてレイアウトします。

 
------------- 
|text text text ... 
| 
| 
| 
|X X 
|X X X X X X X 
--------------

私は私がこれについて行くことができる方法についての手掛かりを持っていない：私はこのように、下から上へ、メインのdivを「埋める」として見られるように、アイコンを希望のに対し。アイコンを下から上に配置するにはどうしたらいいですか？

ありがとうございました！

出典

2010-12-04 Brad

追加してみてください'方向：ここ

は、私が使用しているコードです。これはテキストの方向を制御しますが、おそらくあなたがやっていることでうまくいくかもしれません。 – cfeduke

こんにちは！あなたの迅速な対応に感謝します！ "direction：rtl;"を追加するCSSには、各行のアイコンの順序が変更されました.A B C DではなくD C B Aと表示されましたが、上から下にレイアウトされていました。 – Brad

アイコンの最大数はわかりますか？もっと重要なことに、それらの上に挿入される余分な空白行を必要とするので、アイコンの一番下の行を置き換えますか？ – cfeduke

これはCSSですべて行うことができますが、より多くの非標準プロパティを使用する必要があります。あなたはFirefox 3に標準化しているので問題はありません。

まず、それぞれの画像を垂直に反転させ、div全体を垂直方向に反転させます。

また、bottom: 0px;のスタイルをdiv.icon-trayに削除しました。この方法では、その必要はありません。 `div.icon-てみCSSの定義に、RTL：好奇心のうち

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
    <head> 
     <style type="text/css"> 
     div.icon-tray { 
      position: absolute; 
      -moz-transform: scaleY(-1); 
      -o-transform: scaleY(-1); 
      -webkit-transform: scaleY(-1); 
      transform: scaleY(-1); 
      filter: FlipV; 
      -ms-filter: "FlipV"; 
     } 
     img { 
      -moz-transform: scaleY(-1); 
      -o-transform: scaleY(-1); 
      -webkit-transform: scaleY(-1); 
      transform: scaleY(-1); 
      filter: FlipV; 
      -ms-filter: "FlipV"; 
     } 
     </style> 
    </head> 
    <body> 
    <div class="main-div" style= "position: absolute; width: 700px; height: 600px"> 
     Text text text ... 
     <div class="icon-tray"> 
     <img src="testing.jpg" /> 
     <img src="testing.jpg" /> 
     <img src="testing.jpg" /> 
     <img src="testing.jpg" /> 
     <img src="testing.jpg" /> 
     <img src="testing.jpg" /> 
     <img src="testing.jpg" /> 
     <img src="testing.jpg" /> 
     <img src="testing.jpg" /> 
     </div> 
    </div> 
    </body> 
</html>

出典

2010-12-04 04:50:11 jeremysawesome

また、アイコンや画像の順序が重要な場合は、この方法で説明した 'direction：rtl;'メソッドを試してみることもできます。 – jeremysawesome

それは華麗なJeremyです（私はあなたのユーザ名に同意するでしょう）。私が可能と思っていたもの、CSSがそれを行うための何らかの方法です。私は変換プロパティについて知りませんでしたが、それはそのための大きな用途です。私は、「bottom：0px」プロパティが必要であることを発見しました。そうでなければ、icon-trayはテキストの真下で、main-divの上部にあり、下部にはありませんでした。それはすべてが完璧に見えることを追加した後。ありがとうございました！ – Brad

あなたがやろうとしていることが少しわかりません。

これは動的になりたいものですか？もしそうなら、いくつかのPHPを使用して表示する画像の数を取得し、行ごとに何人かに分割し、残りの部分を取り出して最初に吐き出す必要があります。

ダイナミックでちょうどまっすぐHTMLアップするつもりはない場合は、（あなたのコンテナのdivはとにかくセットの幅と高さを持って考えると？）各画像だけで腹筋の位置に容易になるだろう

出典

2010-12-04 03:13:14 Maurice

私は古い言語で書かれたレガシーアプリケーションを置き換えるPHP/javascriptプログラムを開発しています。古いアプリケーションの外観を複製できるのはいいことです。プラス私が好きなものに特定の化粧品の優雅さがあります。それ以外の方法で置く、非常に底の隙間は私に少し「醜い」ように見える。アイコンのサイズは異なるかもしれませんし、ブラウザと同様にPHPサーバー上でそれらを処理する必要があります。理想的には、可能ならば、CSSがすべての作業を行うならばいいでしょう。 – Brad

私はあなたが持っていると思いますこのためにJavascriptに頼っています。私は今、CSSでこれを行う方法は想像もできません。ここでは、jQueryで何ができるかだ

：

$(document).ready(function() { 
    var total = $('.icon-tray > img').size(), 
     maxperrow = 7, //edit this to the max. imgs per row 
     breakafter = total-parseInt(total/maxperrow)*maxperrow; 

     $('.icon-tray:nth-child('+breakafter+')').css({'clear':'left'}); 
});

上記は、あなたがあなたのイメージが左にフロートする設定されていると仮定しています。

編集：あなたがそれをサーバー側で行うことができれば、さらに優れています。あなたはPHPで（例えば）同じ数学を行うことができ、Javascriptに依存する必要はありません。

出典

2010-12-04 03:39:34 bobsoap

もし私がjavascriptに頼らざるを得なければ、それは問題ありません。私はCSSの専門家ではないことを知っているので、CSSが私のためにすべての仕事をすることができるかどうか疑問に思っていました。それは...私はあなたがここに示したものが好きで、とても素敵です。多分、すべての単一のアイコンを面倒に配置していたでしょう。そのトップラインのフロートをクリアして休憩をとるあなたの考えは、私を非常にエレガントなものにしています。（私はjQueryの 'nth-child'についても知らなかった）。ありがとう！ – Brad

あなたは、あなたが使用することができます（この春クローム、IE9、Firefox4）CSS3を使用することができた場合：

http://dev.w3.org/csswg/css3-flexbox/

私は読書をお勧めしたい：ドン

http://www.html5rocks.com/tutorials/flexbox/quick/

ブラウザをしかし、CSS3はまだトップからボトムまでの経験を得ることができます。幅に基づいて各アイコンを配置するためにjQueryを使用することに時間を費やしても、古いブラウザをサポートするのは難しいことではないかと自問する必要があります。

出典

2010-12-04 04:00:41 cfeduke

私たちはFirefox 3で標準化しましたが、楽しみにしている他のレイアウトマネージャがあることを知っておいてよかったです。 :-)アドバイスをありがとう！ – Brad

divから画像を取り込む必要があります

答えて

関連する問題