Отображение плитки в правильном порядке с использованием HTML и CSS

Я пытаюсь получить этот результат внутри контейнера div на пустой веб-странице. Отображение плитки в правильном порядке с использованием HTML и CSS

До сих пор я закончил с этим: Это далеко не то, что я собираюсь получить. Я не совсем понимаю, как элементы (или контейнеры, которые я предполагаю в этом примере) размещаются на странице, или как я могу отображать их так, как я хочу. Конечно, я мог бы использовать абсолютные позиции и размеры, но мне нужно, чтобы это было «гибким» для разных разрешений, и мне нужно сделать некоторые анимации с помощью jQuery позже, включая изменения позиции и размера каждого плитки. Вот структура страницы до сих пор:

<html> 
    <head> 
     <link href="style.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div class="wrapper" id="body-wrapper"> 
      <div id="menu-wrapper"> 
       <div id="menu-area"> 
        <a href="#mat1"> 
         <span class="me medium_box" id="mat1"> 
         </span> 
        </a> 
        <a href="#mat2"> 
         <span class="me large_rectangle" id="mat2"> 
         </span> 
        </a> 
        <a href="#mat3"> 
         <span class="me medium_rectangle" id="mat3"> 
         </span> 
        </a> 
        <a href="#mat4"> 
         <span class="me small_box" id="mat4"> 
         </span> 
        </a> 
        <a href="#mat5"> 
         <span class="me large_rectangle" id="mat5"> 
         </span> 
        </a> 
        <a href="#mat6"> 
         <span class="me vertical_medium_rectangle" id="mat6"> 
         </span> 
        </a> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

А вот таблица стилей (style.css):

.wrapper { 
    width: 100%; 
    height: 100%; 
} 

body { 
    margin: 0; 
    padding: 0; 
    background: #41B1E1; 
    overflow: hidden; 
} 

#menu-wrapper { 
    width: 1000px; 
    height: 100%; 
    border: 1px solid rgba(0, 0, 0, 0.5); 
} 

.me { 
    color: white; 
} 

.small_box { 
    display: inline-block; 
    width: 125px; 
    height: 125px; 
    background-color: white; 
} 

.medium_box { 
    display: inline-block; 
    width: 250px; 
    height: 250px; 
    background-color: white; 
} 

.large_rectangle { 
    display: inline-block; 
    width: 375px; 
    height: 125px; 
    background-color: aquamarine; 
} 

.medium_rectangle { 
    display: inline-block; 
    width: 250px; 
    height: 125px; 
    background-color: mediumaquamarine; 
} 

.vertical_medium_rectangle { 
    display: inline-block; 
    width: 125px; 
    height: 250px; 
    background-color: white; 
} 

#menu-area { 
    width: 100%; 
    height: 450px; 
    border: 1px solid azure; 
    margin-top: 10%; 
} 

a { 
    text-decoration: none; 
} 

#mat1 { 
    float: left; 
    margin-right: 6px; 
} 

#mat2 { 
    float: left; 
} 

#mat3 { 

}

источник

2016-06-06 Khryus

1. Почему вы не используете плагин для этого? 2. Должен использовать flexbox вместо встроенных ящиков и плавать. Невозможно достичь того, как вы пытаетесь. Читайте о flexbox в CSS. – Senthe

Ну, я не знаю, какой плагин вы имеете в виду или что вы имели в виду, также я не знаю, что такое flexboxes. У меня нет большого опыта в этой области, я все еще довольно новичок:/ Редактировать: будет проверять flexboxes, спасибо. – Khryus

Только google "jquery plugin tiles", и вы, вероятно, сможете его найти. Я точно знаю, что Угловой материал имеет компонент плитки, который должен работать аналогично тому, что вы пытаетесь достичь, но это слишком большая зависимость, чтобы включать только это меню. – Senthe

настроить jsfiddle так что вы можете увидеть, как position: absolute работает в этом случае. Вы должны быть в состоянии исходить из этого момента.

https://jsfiddle.net/kdfxnfba/

источник

2016-06-06 14:42:15 Senthe

Отображение плитки в правильном порядке с использованием HTML и CSS

ответ

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