用css進行網格佈局？

我試圖用css創建某種網格佈局：用css進行網格佈局？

有一個內容div，它分爲2個colums：main + right。

現在我有2種元素。我總是希望這些元素並排排列。

所以我有這樣的事情：

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

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

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

和我的index.xhtml：

<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>

當然這並不只爲ID的第一次出現的工作，因爲一個是不允許重用該ID。但這顯示了我想要做的事情。我怎樣才能設置它？

thnx

來源

2012-02-19 membersound

當然，這隻適用於id的第一次出現，因爲不允許重用id。

只需使用class，而不是id。

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

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

與

.rightcol { 
    ... 
} 

.maincol { 
    ... 
}

來源

2012-02-19 14:47:54 BalusC

niiiice！tyvm不瞭解課堂！ – membersound 2012-02-19 15:09:36

不客氣。 – BalusC 2012-02-19 23:06:46

我通常只是使用panelGrid做這種事情。我爲每列創建類並在columClasses屬性中使用它們。我發現它比確保我的CSS和主題的CSS在一起玩起來更容易一些。你嘗試過嗎？

來源

2012-02-19 14:44:50 Andre

我認爲這是更好的，你包圍在包含每個面板組這樣的另一個股利或其他元素中的每個mainCol和rightCol：

<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>

，並由方式，如果使用元素的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的浮動屬性工作時，我總是用一個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進行網格佈局？

回答

相關問題