Atitit.100% 複数の子要素アダプティブ レイアウトattributs_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:17:03
オリジナル
939 人が閲覧しました

Atitit. 複数の子要素の 100% アダプティブ レイアウト属性

1.1. テーブル レイアウト 1

1.3.

1.4.amazuiの読み込み完了2

1.1.

原則

各サブ要素は均等に分散されますが、min-widthが優先されます

アルゴリズム: 最初に平均を計算し、次にそれを各要素と比較しますmin-width を使用すると、平均の min-width より大きい要素が個別にグループ化されます。

他の要素の残りの平均を再度計算し、現在の平均より大きい要素がなくなるまでグループ化します

1.2.

テーブルのレイアウト

< ;tbody>

< ;/table>

著者:: ★(attilax)>> ;> ; ニックネーム: Laowa's Claw (フルネーム: Attilax Akbar Al Rapanui アティラックス アクバル アル ラパヌイ) 中国語名: Ai Long、電子メール: 1466519819@qq。 com

1.3.

CSS レイアウト

最小幅 list_jobus_cp.js

function SelectorWidthAdj()

{

if(screen.width>320 && screen.width{

/ /alert( $(".am-selected").length);

var ctrl=$(".am-selected").last();

var widthx=screen.width-$(ctrl).width ()-5;

var width_per =widthx/3;

$(".am-selected").each(function(index, element) {

$(element).css("width",width_per+" px");

//alert (index);

それを判断するロードされています

if(screen.width>320 && screen.width {

var timerQ5=window. setInterval(function(){

if(isSelectorLoadFinished())

{

SelectorWidthAdj( );

window.clearInterval {

if($(".am-selected").length< 4)

Return false;

var ctrl=$(".am-selected").last();

if(ctrl)

{

if($(ctrl).width()>100 )

return true ;

else

return false;

}

}

1.5

---終了

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート