Динамическая компоновка DIV?

Я пытаюсь выяснить, как динамически размещать DIV, чтобы они формировали макет сетки.Динамическая компоновка DIV?

Моя страница очень проста. У меня есть DIV, который является оболочкой и производится с помощью:

#wrapper { 
    width: 80%; 
    margin: 50px auto; 
    padding: 20px; 
    border:1px solid #000000; 
    display: table; 
    }

Вот FIDDLE этой страницы работы.

В этом я хочу разместить 6 ячеек (возможно, 8, но для этого 6 будет хорошо) Ячейки отображаются с использованием родительского & ребенка css.

Права пользователей определяют, сколько ячеек они могут видеть. Таким образом, некоторые пользователи будут видеть 6, другие 5, 4,3 и т. Д.

Приложенный снимок экрана показывает, как я хочу, чтобы макет выглядел в зависимости от количества отображаемых ячеек. (Все центрируется правильно - в отличие от моего образа)

enter image description here

Запись текста для ячеек не важно, некоторые пользователи будут видеть 2 клетки, и это может быть «поле 1» & «поле 6», другой пользователь это может быть «поле 5» & «поле 2» и т.д.

клетка создается с помощью

<div class="child"> 
     <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png' /> 
     <p>field 1</p> 
    </a> 
    </div>

PHP будет использоваться, чтобы скрыть код выше для любого элемента, который не следует рассматривать.

Любая идея, как я могу добиться этого?

Благодаря

источник

2015-03-25 JeffVader

Вы сказали, что генерировать код с PHP так просто добавить if, что решить, какой макет нужен. Если вам нужно только 4 divs, генерируйте только два дочерних div на родительский div.

Ваш HTML и CSS, кажется, отлично работают, когда я удаляю divs из HTML-кода.

Я не вижу причины усложнять ваш CSS, если вы можете легко справиться с этим с помощью кода PHP. Простые и чистые HTML и CSS будут загружаться и визуализироваться быстрее, а также будет легче поддерживать.

источник

2015-03-25 09:53:19

при удалении делений от первой строки, то верхний ряд заканчивается 2 дивы. Я думаю, что требование состоит в том, чтобы иметь одинаковый контур, независимо от удаленной позиции div. – Sushovan

Если у вас есть доступ к PHP-коду, я думаю, что это гораздо лучшее решение для создания простого чистого кода с ним, а не для усложнения кода CSS. –

Вы можете работать с использованием свойства CSS3 flex и java-скрипта. В HTML-файле вам нужно просто поместить все шесть дочерних элементов [div.child] внутри родительского [div # parent]. Разделение дочерних элементов может быть выполнено с использованием самого JavaScript.

Проверить это следующий код:

<!doctype HTML> 
    <html> 
     <head> 
      <style> 
       #wrapper { 
        width: 80%; 
        margin: 50px auto; 
        padding: 20px; 
        border:1px solid #000000; 
        display:block; 
       } 
       #parent { 
        display: flex; 
        font-size: 1em; 
        height: auto; 
        justify-content: space-around; 
        line-height: 0.6em; 
        margin: 0 0 30px; 
        text-align:center; 
       } 
       .child { 
        width: 120px; 
        height: 75px; 
        border: solid 1px #000; 
        display: inline-block; 
        letter-spacing: normal; 
        font-size: normal; 
        white-space: normal; 
        text-align: center; 
        vertical-align: middle; 
        margin:5px 25px 20px 25px; 
       } 
      </style> 
     </head> 
     <body> 
      <div id="wrapper"> 
       <div id="parent"> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 1</p> 
         </a> 
        </div> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 2</p> 
         </a> 
        </div> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 3</p> 
         </a> 
        </div> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 4</p> 
         </a> 
        </div> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 5</p> 
         </a> 
        </div> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 6</p> 
         </a> 
        </div> 
       </div> 
      </div> 
     </body> 
    </html> 
<script> 
    var wrapper= document.getElementById('wrapper'); 
    var temp= document.getElementById('parent'); 
    child= temp.childElementCount; 
    if(child == 3) 
    { 
     temp.style.flexFlow= "row nowrap"; 
    } 
    if(child == 4) 
    { 
     temp.style.flexFlow="row nowrap"; 
     var row2 = document.createElement("div"); 
     row2.setAttribute('id','parent'); 
     var child3= temp.childNodes[5]; 
     var child4= temp.childNodes[7]; 
     row2.appendChild(child3); 
     row2.appendChild(child4); 
     wrapper.appendChild(row2); 
    } 
    if(child == 5) 
    { 
     temp.style.flexFlow="row nowrap"; 
     var row2 = document.createElement("div"); 
     row2.setAttribute('id','parent'); 
     var child4= temp.childNodes[7]; 
     var child5= temp.childNodes[9]; 
     row2.appendChild(child4); 
     row2.appendChild(child5); 
     wrapper.appendChild(row2); 
    } 
    if(child == 6) 
    { 
     temp.style.flexFlow="row nowrap"; 
     var row2= document.createElement("div"); 
     row2.setAttribute('id','parent'); 
     var child4= temp.childNodes[7]; 
     var child5= temp.childNodes[9]; 
     var child6= temp.childNodes[11]; 
     row2.appendChild(child4); 
     row2.appendChild(child5); 
     row2.appendChild(child6); 
     wrapper.appendChild(row2); 
    } 
</script>

источник

2015-03-25 10:05:05 idzignr

Динамическая компоновка DIV?

ответ

Смежные вопросы