Анимированный div внутри div, поднимающегося со дна

Question

Анимированный div внутри div, поднимающегося со дна

0

http://www.canvasmagazine.net/

Может ли кто-нибудь посоветовать мне, как эти люди смогли создать этот квадратный макет, поскольку я попробовал таблицы и divs, но не могу заставить макет страницы выглядеть одинаково, мне нравится способ отображения содержимого и изображений.

user3611948 08 май 2014, в 10:23

Источник

0

Пожалуйста, не используйте таблицы для этого. На мой взгляд, это не семантика.
pethel 08 май 2014, в 08:25

Теги:

javascript

html

css

tabular

4 ответа

0

Это довольно просто, я использовал HTML/CSS, который они использовали, и упростил его здесь http://jsfiddle.net/gzda5/1/

Вам просто нужно установить ширину div и правильно поместить столбцы.

В левой колонке:

float: left;

В правой колонке:

float: right;

DavidG 08 май 2014, в 07:14

0

Каждый столбец - один div, в котором разные div внутри.

qtgye 08 май 2014, в 06:13

0

поместите эти кубики в свое тело

   <div class="column-center">Column center</div>
   <div class="column-left">Column left</div>
   <div class="column-right">Column right</div>

поместите эти коды css в ваш файл css

.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

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

надеюсь это поможет

Tharaka Nuwan 08 май 2014, в 05:16

Ещё вопросы

Пожалуйста, не используйте таблицы для этого. На мой взгляд, это не семантика.

pethel · Accepted Answer · 2014-05-08T05-36-00.000Z

Создавайте ячейки и плавайте их.

HTML:

<div id="container">
   <div id="cell1">
      <div>Article1</div>
      <div>Article2</div>
   </div>    
   <div id="cell2">
      <div>Article3</div>
      <div>Article4</div>  
   </div>  
   <div id="cell3">3</div>  
</div>

CSS:

#container{
    width: 100%;
    overflow: hidden; 
}

#cell1{
    float: left;
    width: 33%;
    background-color:red;
}
#cell2{
    float: left;
    width: 33%;
    background-color:blue;
}
#cell3{
    float: left;
    width: 33%;
    background-color:green;
}