最後の行を除いてdivブロックを中央に維持しようとしています。最後の行ではなく中央のdivブロック
他の誰かがこのフィドルを既に作成していて、私の質問を示しています。ウィンドウのサイズが変更されても、結果パネルのブロックがどのように中央に配置されているかを見ることができます。私は同様の動作をしたいと思いますが、最後の行に上記の行よりも少ないブロックが含まれている場合、その最後の行は中央揃えにならずに左揃えにすべきです。ここで
はフィドルです：私はちょうどfloatを使用していない理由を http://jsfiddle.net/zbbHc/1/
誰かが頼むかもしれない：左。その問題は、ラッパーの固定幅を指定しなくても、そのメソッドを使用してブロックをセンタリングする方法を見つけることができなかったことです。私はすべてを可能な限り液体にしています。
をどのように動作するかだhttp://jsfiddle.net/zbbHc/38/はhttp://jsfiddle.net/zbbHc/45/
わからないこのバイオリンを試してみて、私はこれは私たちだけではCSSを使用して行うことができる最大のだと思います。
更新：（これはすべてのケースでどの作業以下のコードをチェックし、すべてのケースでは動作しません[私は推測]）
HTML
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB hide"></div>
<div class="iB hide"></div>
</div>
CSS
.wrapper {
width: 100%;
background: red;
text-align: center;
text-align-last: left;
}
.iB {
display:inline-block;
width: 200px;
height: 100px;
background: green;
}
.iB.hide {
visibility:hidden;
}
ここでは、jQueryを使用した迅速で汚れたメソッドがあります。これは、目に見えない要素が追加されます自動的に
フィドルここhttp://jsfiddle.net/fD6fn/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<style>
.wrapper {
width: 100%;
background: red;
text-align: center;
text-align-last: left;
}
.iB {
display:inline-block;
width: 200px;
height: 100px;
background: green;
}
.iB.hide {
visibility:hidden;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
<script language="javascript">
function findHiddenElementCount() {
var $wrapper = $("#wrapper"),
itemWidth = "200",
count = "",
itemCount = 7;
count = $wrapper.width()/itemWidth;
// Some wild logic below, can be optimized.
return parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ;
}
function addInvisibleElements()
{
// Delete invisible items
$("#wrapper .iB.hide").remove();
var c = findHiddenElementCount();
for(var i = 0; i < c;i++)
{
$("#wrapper").append('<div class="iB hide"></div>');
}
}
$(window).bind("resize",addInvisibleElements); // resize handler
$(document).ready(addInvisibleElements); // take care during page load
</script>
</body>
</html>
残念ながら、Chromeでは、すべてが一列に並んでいます。 –
もう一度それをチェックし、ブラウザのサイズで遊ぶべきだと思います。ウィンドウを大きくすると隠れた行を追加する必要があることを除いて、完全に機能するようです。 OPがどのようなものであるかによって、これとJavascriptが混在したり、多数の非表示行を追加するだけで動作します。 – travis
このアプローチのいくつかの否定的な側面がありますが、隠されたブロックがラッパーを伸ばすよりも長い時間縦に伸びてしまうという主な懸念がありますが、これはかなり興味深い提案です。 もう一つの問題はさまざまな状況で挿入する必要がある目に見えないブロックの量を判断するためにjavascriptを使用する方法がわかりません。 –
なぜパーセンテージを使用しませんか？流体レイアウトのほとんどは通常
これは中央に配置されていません。 Chromeでは、少なくとも。 –
私はそれをページの中心に置く必要があるので。 –
アライメントセンターは、本当に古くて今は悪い解決策です。人々が使用をやめなければならないものがあります。流体のレイアウトがどのように機能するかの素晴らしい例が見つかりますhttp://twitter.github.com/bootstrap/examples/fluid.html – Paradise
はあなたが最後の行が少ないブロックを持っている「を場合は、」あなたはそれが動的なコンテンツだという意味ではないと言いますか？あなたが知っている場合、それは、あなたがちょうど半分に独自の幅の値（および任意のマージンなど）に対して相対的にそれを配置することができるものを持っています
.iB:last-child{
position:relative;
left:-100px;
background:blue;
}
こんにちは！私は可能なユーザのブラウザウィンドウサイズを知らないので、最後の行にいくつのブロックがあるか分からない。ブラウザーウィンドウが非常に広い場合、より多くのブロックが1行のectに収まります。 –
私は参照してください。うーん、その場合、私はDOMが必然的に画面に表示されている行を「行」として登録するとは思わない。私は間違っている可能性があります。私は研究に行くつもりです！面白い質問！ –
テーブルでこれを行うことも可能です（私はテーブルを避けようとする傾向があるが）。テーブルセルの寸法は、その内容によって決まります（もちろん、独自の寸法、最大/最小寸法を追加できます）。あなたは1つの列を持つテーブルを持つことができますが（それはベストプラクティスではありませんが）divをテーブルに埋め込むことができます（各divはブロックです）。
テーブルの幅は、最も幅の広いセルの幅に基づいているため流動的になります（したがって、ブロックはうまく整列し、きれいに見えます）。もちろん、最後の行に含まれるブロックが少ないかどうかをチェックするスタイル/メソッドと、そのセルの左にテキストの配置を設定する場合は、スクリプティングをお勧めします。
この解決策では多少の改善が見られるかもしれませんが、これを使うためには良いスタートかもしれません。
これは純粋なCSSで行うことができますか非常に興味深いです。 – Kos
ラッパーはどのくらいですか？行の中にあるアイテムの数は関係ありますか？ – JohnC
大きな質問！ @ JohnCの質問への展開として、ラッパーに固定幅を適用したくないと言うと、2つの「列」の固定幅を設定したくないということを意味しますか？ –