Сетка макет с CSS? - PullRequest
Новая
       11

Сетка макет с CSS?

1 голос
/ 19 февраля 2012

Я пытаюсь создать какую-то сетку с помощью CSS:

Имеет div содержимого, который разделен на 2 столбца: 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>

Конечно, это работает только при первом появлении идентификатора, так как нельзя использовать его повторно Но это показывает, что я пытаюсь сделать. Как я могу еще настроить?

Thnx

Ответы [ 4 ]

1 голос
/ 19 февраля 2012

Конечно, это работает только для первого вхождения идентификаторов, так как нельзя повторно использовать идентификатор.

Просто используйте 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 {
    ...
}
0 голосов
/ 19 февраля 2012

Я думаю, что вам не хватает класса CSS: при работе с атрибутом float в DIV я всегда использую div с атрибутом «clear: both» после выделенных 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>

Я надеюсь, что это поможет вам решить вашу проблему.

0 голосов
/ 19 февраля 2012

я думаю, что лучше, чтобы вы включили каждый mainCol и rightCol в другой div или другой элемент, который содержит каждую группу панелей, например: 

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

элементов, если он используется более одного раза, он не будет отображаться так, как вы этого хотите.Вы можете использовать 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%; 
}
0 голосов
/ 19 февраля 2012

Я обычно просто использую PanelGrids для подобных вещей. Я создаю классы для каждого столбца и использую их в атрибутах columClasses. Я нахожу это немного проще, чем убедиться, что мой CSS и CSS темы хорошо играют вместе. Вы пробовали это?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...