用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进行网格布局？

回答

相关问题