タグ付けされた質問 「css-float」

CSS float属性を使用して、要素をコンテナの左または右に配置します。

18
3つのdiv（左/中央/右）を別のdiv内に配置する方法は？
次のように、コンテナーdiv内に3つのdivを配置したいと思います。 [[LEFT] [CENTER] [RIGHT]] コンテナーdivは100％幅（設定された幅なし）であり、コンテナーのサイズを変更した後、中央のdivは中央にとどまる必要があります。 だから私は設定しました： #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} しかし、次のようになります。 [[LEFT] [CENTER] ] [RIGHT] 任意のヒント？
12
フローティングエレメントを中央に配置するにはどうすればよいですか？
私はページネーションを実装していますが、それを中央に配置する必要があります。問題は、リンクをブロックとして表示する必要があるため、フロートさせる必要があることです。しかし、その後はtext-align: center;機能しません。leftのラッパーdivパディングを指定することでそれを実現できますが、すべてのページに異なる数のページが含まれるため、機能しません。これが私のコードです： .pagination { text-align: center; } .pagination a { display: block; width: 30px; height: 30px; float: left; margin-left: 3px; background: url(/images/structure/pagination-button.png); } .pagination a.last { width: 90px; background: url(/images/structure/pagination-button-last.png); } .pagination a.first { width: 60px; background: url(/images/structure/pagination-button-first.png); } <div class='pagination'> <a class='first' href='#'>First</a> <a href='#'>1</a> <a href='#'>2</a> <a href='#'>3</a> …
354 css-float  center  css 
6
float：left; 対表示：インライン; vs表示：インラインブロック; vs表示：テーブルセル;
私の質問 これらの方法のいずれかが、プロのWebデザイナーに好まれていますか？ これらの方法のいずれかは、ウェブサイトを描画するときにウェブブラウザによって優先されますか？ これはすべて個人的な好みですか？ 他に見逃しているテクニックはありますか？ 注：上記の質問は、複数列レイアウトの設計に関するものです float：left; http://jsfiddle.net/CDe6a/ これは、列のレイアウトを作成するときにいつも使用する方法で、問題なく動作するようです。ただし、親はそれ自体で崩壊するので、clear:both;後で覚えておく必要があります。私が見つけたもう1つの欠点は、テキストを垂直に配置できないことです。 表示：インライン; これは、親の折りたたみの問題を修正するようですが、空白が追加されます。 http://jsfiddle.net/CDe6a/1/ HTMLから空白を削除することがこの問題を解決する最も簡単な方法のようですが、HTMLに本当にうるさい場合は望ましくありません。 http://jsfiddle.net/CDe6a/2/ 表示：インラインブロック; のように動作するようdisplay:inline;です。 http://jsfiddle.net/CDe6a/3/ 表示：テーブルセル; http://jsfiddle.net/CDe6a/4/ 完璧に動作します。 私の考え： レイアウトを壊す特定の例外のように、たくさんのものを見逃していると私は確信していますが、display:table-cell;最もうまく機能してfloat:left;いるようですclear:both;。私はこれについて多くの記事やブログをウェブで読んだことがあるが、どれも私が私のウェブサイトをレイアウトするときに何を使うべきかについて明確な答えを与えてくれない。
281 html  css  css-float 
10
div内のフローティング要素は、divの外側にフロートします。どうして？
あなたがを持っているdivとしましょう、それを明確にしwidth、それに要素を入れてください、私の場合imgはとdivです。 アイデアは、コンテナのコンテンツがdivコンテナdivを引き伸ばし、コンテンツの背景になるというものです。しかし、これを行うとdiv、非フローティングオブジェクトに合わせてコンテナが縮小します。フローティングオブジェクトは、完全に外れるか、ハーフアウト、ハーフインになり、bigのサイズには影響しませんdiv。 どうしてこれなの？私が欠けている何かがあり、どのように私は伸ばすべき項目を浮かべ得ることができますheight含むのがdiv？
274 css  html  css-float 
10
CSSフロートを1行に保つにはどうすればよいですか？
float: left左側のアイテムに使用している同じ行に2つのアイテムが欲しいです。 私はこれを一人で達成するのに問題はありません。問題は、私は2つの項目がしたい、あるとどまる同じ行にあなたは非常に小さく、ブラウザのサイズを変更した場合でも。ご存知のように...テーブルでどうだったか。 目標は、右側のアイテムが何に関係なくラッピングしないようにすることです。 divがの下にくるようにラップするのではなく、コンテナをストレッチするdivことをCSSを使用してブラウザに伝える方法float: right;はfloat: left; div？ 私が欲しいもの： \ +---------------+ +------------------------/ | float: left; | | float: right; \ | | | / | | |content stretching \ Screen Edge | | |the div off the screen / <--- +---------------+ +------------------------\ /
7
コンテナ要素にフロート要素が含まれている場合、コンテナ要素の高さが増加しないのはなぜですか？
高さとフロートがどのように機能するかを質問したいと思います。外部divとコンテンツを含む内部divがあります。高さは内側のdivの内容によって異なる場合がありますが、内側のdivが外側のdivをオーバーフローするようです。それを行う適切な方法は何でしょうか？ <html> <body> <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange"> <div style="width:500px; height:200px; background-color:black; float:right"></div> </div> </body> </html> コードスニペットを実行する結果を非表示スニペットを展開
210 html  css  css-float 
8
グリッド/タイルビューを作成する方法
たとえば、いくつかのクラス.articleがあり、このクラスをグリッドビューとして表示したいとします。だから私はこのスタイルを適用しました： .article{ width:100px; height:100px; background:#333; float:left; margin:5px; } そのスタイルは、.articleをタイル/グリッドのように見せます。高さを固定しても問題ありません。しかし、高さを自動に設定したい場合（その中のデータに応じて自動的に拡大する）、グリッドは見苦しく見えます。 そして、私はこのようなビューを作りたいです：
5
CSSでdisplay：inline-blockとfloat：leftを使用する利点
通常、複数を続けたい場合はをDIVs使用しますfloat: leftが、今ではdisplay:inline-block リンクの例はこちら。その私には思えるdisplay:inline-blockの良い方法であるalign DIVs行ではなく、そこに任意の欠点ですか？このアプローチがfloatトリックほど人気が​​ないのはなぜですか？
127 css  css-float  html 
5
右フロートと絶対位置は連動しません
divを常に親divの右側に配置したいので、を使用しますfloat:right。できます。 ただし、挿入時に他のコンテンツに影響を与えないようにしたいので、を使用しますposition:absolute。 現在float:rightは機能しません。私のdivは常に親divの左側にあります。どうすれば右に移動できますか？
125 css  css-float  position 
8
DIVを互いの上に積み上げますか？
次のような複数のDIVを積み重ねることは可能ですか？ <div> <div></div> <div></div> <div></div> <div></div> </div> これらすべての内部DIVのX位置とY位置が同じになるようにするには？デフォルトでは、それらはすべて互いに下にあり、直前のDIVの高さだけY位置を増やします。 なんらかのフロートやディスプレイ、または他のトリックが噛み付くような気がします。 編集：親DIVには相対位置があるため、絶対位置を使用しても機能しないようです。
115 css  html  stack  css-float 
11
コンテンツのないdivに幅を持たせるにはどうすればよいですか？
に幅を追加しようとしdivていますが、コンテンツがないため問題が発生しているようです。 ここに私が持っているCSSとHTMLがありますが、機能していません： CSS body{ margin:0 auto; width:1000px } ul{ width:800px; } ul li{ clear:both; } .test1{ width:200px; float:left; } HTML <body> <div id="test"> <ul> <li> <div class="test1">width1</div> <div class="test1">width2</div> <div class="test1">width3</div> </li> <li> <div class="test1"></div> <div class="test1">width2</div> <div class="test1">width3</div> </li> <li> <div class="test1"></div> <div class="test1">width2</div> <div class="test1">width3</div> </li> </ul> </div>
110 html  css  width  css-float 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.