5

最後の行を除いて、divブロックを中央に配置しようとすることに本当にこだわっています。

他の誰かがすでにこのフィドルを作成しており、そのような私の質問を示しています。ウィンドウのサイズを変更しても、結果パネルのブロックが中央に配置されていることがわかります。同様の動作をしたいのですが、最後の行に含まれるブロックが上の行よりも少ない場合、その最後の行は中央揃えではなく左揃えにする必要があります。

これがフィドルです： http://jsfiddle.net/zbbHc/1/

float:left だけを使用しない理由を尋ねる人がいるかもしれません。それに関する問題は、ラッパーの固定幅も指定せずに、その方法を使用してブロックを中央に配置する方法を見つけることができなかったことです。私はすべてをできるだけ液体に保とうとしています。

4

4 に答える 4

2

このフィドルを試してみてください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 </p> 

.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; 
}

</p>

これは、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>
于 2012-07-27T15:56:31.563 に答える
1

なぜパーセンテージを使わないのですか？http://jsfiddle.net/zbbHc/38/これは、ほとんどの流動的なレイアウトが通常どのように機能するかです

于 2012-07-27T15:49:49.570 に答える
0

テーブルでこれを行うことは可能かもしれません (私はテーブルを避けようとする傾向がありますが)。テーブル セルのサイズは、その内容によって決まります (もちろん、独自のサイズ、または最大/最小サイズを追加できます)。1 つの列を持つテーブルを作成し、(ベスト プラクティスではありませんが) テーブルに div を埋め込むことができます (各 div はブロックです)。

テーブルの幅は、最も広いセルの幅に基づいているため流動的であり (したがって、ブロックはきれいに整列し、非常にきれいに見えます)、ハードコードまたはスクリプトを作成できます (もちろん、お勧めしますスクリプティング) 最後の行に含まれるブロックが少ないかどうかを確認するスタイル/方法、およびそのセルのテキスト配置を左に設定する場合のみ。

このソリューションはおそらくいくつかの改善を使用できますが、これを何に使用するかによっては、良いスタートになるかもしれません.

于 2012-07-27T17:08:13.383 に答える
0

最後の行のブロック数が少ない場合は、それが動的コンテンツであることを意味しますか? あることがわかっている場合は、それ自体の幅の半分の値（およびマージンなど）に対して相対的に配置できます。

.iB:last-child{
   position:relative;
   left:-100px;
   background:blue;
}

http://jsfiddle.net/zbbHc/54/

于 2012-07-27T16:13:57.817 に答える