1

リキッド レイアウトの左の列である div の中央に ul を配置したいと考えています。そのためには、ul をラップするために使用した div の幅を設定する必要があります。注: リスト項目 (およびコンテンツ) は、php を使用してデータベースから取得されます。

jquery を使用してこれを行う方法についての提案に興味があります。

以下のマークアップを検討してください。

<div id="wrapper">

   <div id="left-column">
     <div id="list-wrap">
       <ul>
        <li>Dynamic content 1</li>
        <li>Dynamic content 2</li>
        <li>Dynamic content 3</li>
        <li>Dynamic content 4</li>
       </ul>
      </div><!--/list-wrap-->
   </div><!--/left-column-->

   <div id="right-column">
     Content
   </div><!--/right-column-->

   <div style="clear: both;"></div>

   </div><!--/wrapper-->

このCSSを使用：

#wrapper {}
#left-column { float: left; width: 50%; }
#right-column { float: right; width: 50%; }
#list-wrap { margin: 0 auto 0 auto; padding: 40px; }
#list-wrap ul { list-style-type: none; }
#list-wrap ul li { float: left: width 160px; height: 160px; margin: 20px; }

JavaScriptに関してはあまり賢くはありませんが、解決策には次のようなものが必要だと思います：

  1. #left-column の使用可能なコンテンツ領域の幅を見つけます。
  2. その幅に収まる li の数を計算します (#list-wrap のマージンとパディングを考慮して)。
  3. 図を最も近い 200 ピクセル (幅 160 ピクセル + 余白 2x20 ピクセル) に丸めますか?
  4. 幅を #list-wrap に適用します。

これは、開始するための基準の一部を満たす以前に使用したものです。

   var menuWidth = 0;
   $(".menu > ul > li > a").each(function(i) {
     menuWidth += $(this).outerWidth(true);
     });
    $(".menu").css("width", menuWidth);

よろしくお願いいたします。

ニールス

4

4 に答える 4

1

CSS ジョブを実行するのに js は必要ありません。

このスタイルを検討してください：

#wrapper {}
#left-column { float: left; width: 50%; }
#right-column { float: right; width: 50%; }
#list-wrap { margin: 0 auto 0 auto; padding: 40px; }
#list-wrap ul { list-style-type: none; text-align: center; }
#list-wrap ul li { width: 160px; height: 160px; margin: 20px; display: inline-block; }

アイテムを取り除きfloat: left;、lidisplay: inline-block;

最後に、 に追加text-align: center;しULて中央揃えにします

これがあなたが探していたものであることを願っています。

于 2010-01-24T13:37:24.033 に答える
0

Jquery ソリューション:

これはあなたのコードを書くための最良の方法ではありません.私はあなたにアイデアを与えるためにこのようにしました:

$(function() {
    var availableWidth = $("#list-wrap").width();
    var liWidth = $("#list-wrap ul li").outerWidth(true);
    var numberOfListItem = parseInt(availableWidth/liWidth);
    var newWidth = numberOfListItem*liWidth;
    $("#list-wrap").width(newWidth);
});

注: css に margin: 0; を追加します。パディング: 0; ULへ

ここで表示できます: http://jsbin.com/uxaho/3/edit

于 2010-01-26T23:59:39.197 に答える
0

jQueryの幅関数は、使用可能な領域を既に返します。それで、あなたがやろうとしていることはかなり簡単だと思います：

var ulWidth = $("#list-wrap ul li").width();
$("#list-wrap").width(Math.floor(($("#left-column").width() - 80) / ulWidth) * ulWidth);

一般的になり、関連するパディングとボーダーも計算したい場合は、質問「要素の合計幅 (パディングとボーダーを含む) in jQuery 」を参照してください。

于 2010-01-24T12:26:17.840 に答える
0

要素の幅を取得するには、次のようにします。

var width = $('.selector').width();

要素の幅を設定するには:

$('.selector').width( width );
于 2010-01-24T12:26:50.037 に答える