CSSを使ったグリッドレイアウト？

私はCSSでグリッドレイアウトを作成しようとしています：CSSを使ったグリッドレイアウト？

2つの列に分かれたコンテンツdivを持っています：main + right。

今は2種類の要素があります。私はいつもこれらの要素を並べて整列させたい。

だから私はこのような何か抱えている：これは一つだけであるので、IDの最初の出現のために働くんもちろん

<p:panel id="outerPanel"> 

      <h:panelGroup id="maincol"> 
       <ui:include src="table1.xhtml" /> 
      </h:panelGroup> 
      <h:panelGroup id="rightcol"> 
       <ui:include src="input1.xhtml" /> 
      </h:panelGroup> 

      <h:panelGroup id="maincol"> 
       <ui:include src="table2.xhtml" /> 
      </h:panelGroup> 
      <h:panelGroup id="rightcol"> 
       <ui:include src="input2.xhtml" /> 
      </h:panelGroup> 


    </p:panel>

：

#outerPanel{ 
width:100%; 
float:right; 
position:relative; 
    } 

#rightcol{ 
width:35%; 
float:right; 
position:relative; 
} 

#maincol{ 
float: left; 
position: relative; 
width:65%; 
}

、私のいるindex.xhtmlをIDを再利用することはできません。しかしこれは私がやろうとしていることを示しています。どうすればそれをセットアップできますか？

のthnx

出典

2012-02-19 membersound

はIDを再利用することはできません。

だけclassの代わりidを使用しています。

<div class="row"> 
    <h:panelGroup styleClass="maincol"> 
     <ui:include src="table1.xhtml" /> 
    </h:panelGroup> 
    <h:panelGroup styleClass="rightcol"> 
     <ui:include src="input1.xhtml" /> 
    </h:panelGroup> 
</div>

とすることにより：

.rightcol { 
    ... 
} 

.maincol { 
    ... 
}

出典

2012-02-19 14:47:54 BalusC

niiiice！タイヴムはクラスについて知らなかった！ – membersound

ようこそ。 – BalusC

私は通常ちょうどそういったことを行うためにpanelGridsを使用しています。私は各列のクラスを作成し、それらをcolumClasses属性で使用します。私は、私のCSSとテーマのCSSがうまくいっているかどうかを確かめることよりも少し簡単です。あなたはそれを試しましたか？これが唯一の一つとして、IDの最初の出現のために働くんもちろん

出典

2012-02-19 14:44:50 Andre

と

<h:panelGroup styleClass="maincol"> 
    ... 
</h:panelGroup> 
<h:panelGroup styleClass="rightcol"> 
    ... 
</h:panelGroup> 

<h:panelGroup styleClass="maincol"> 
    ... 
</h:panelGroup> 
<h:panelGroup styleClass="rightcol"> 
    ... 
</h:panelGroup>

私はそれはあなたがこのような各パネルグループを含む別のdivまたは他の要素の各mainColとrightColを囲むほうが良いと思います要素が複数回使用されている場合は、必要に応じて表示されない場合は、要素のIDを使用することは良い方法ではありません。あなたの場合、class = "mainCol"またはstyleClassを使いたいかもしれません。あなたのCSSの

：

#outerPanel{ 
    width:100%; 
    float:right; 
    margin: auto; /*if you want to center out the content*/ 
    /*position:relative;*/ /*what do you want to use relative for?*/ 
} 

.col { 
    float: left; 
    clear: both; 
} 

.rightcol{ 
    width:35%; 
    float:right; 
    /*position:relative;*/ 
} 

.maincol{ 
    float: left; 
    /*position: relative;*/ 
    width:65%; 
}

出典

2012-02-19 14:49:36 JohnnyQ

私はあなたがCSSクラスが欠落していると思う： DIVの上のfloat属性を扱うとき、私は常に属性を持つdiv要素を使用して「クリア：両方」の後divの概要を示します。例えば

：

CSS

.container { width: 100% } 
.left { width: 49%; float: left } 
.right { width: 49%; float: left } 
.clear { clear: both }

HTML

<html> 
<head> 
    <title>DIVS</title> 
</head> 
<body> 
    <div class="container"> 
     <div class="left">Some Content</div> 
     <div class="right">Some Content</div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

私は、これはあなたの問題を解決するために、正しい方向にあなたを置きます願っています。

出典

2012-02-19 14:55:17

CSSを使ったグリッドレイアウト？

答えて

関連する問題