CSS верстка на HTML5 - PullRequest
Новая
       8

CSS верстка на HTML5

0 голосов
/ 10 марта 2012

Я разрабатываю одно веб-приложение на HTML5 и JS. И я использую некоторые теги Canvas . Поэтому я хотел бы структурировать их на экране следующим образом: enter image description here

Я добился этого с помощью таких тегов CSS, как: margin-right, margin-left, top, position . Проблема в том, что когда я использую эти теги CSS, я более или менее адаптирую весь макет только к одному экрану, к сожалению, моя цель - поддерживать любой экран.

Может быть, есть специалисты по верстке, которые могли бы помочь с этой конкретной проблемой.

P.S. При изменении размера окна размеры холста не должны изменяться

Ответы [ 3 ]

0 голосов
/ 10 марта 2012

Борис, вам нужно будет либо реализовать его, используя внешние контейнеры для каждой области (т.е. 3 внешних элемента, один для каждого столбца и один "основной" элемент div для позиционирования в середине экрана, используя проценты и макс./ мин ширина для контроля желаемого выхода).

Или избавьте себя от неприятностей и используйте систему жидкостных решеток, например:

Вы также можете посмотреть здесь , здесь есть некоторая полезная информация о макетах флюидов.

0 голосов
/ 10 марта 2012

Я создал вам демо.

Я считаю, это , что вы хотите.

HTML: 

<div id="wrapper">
    <div id="col1">
        <div class="canvas">Canvas-Left-1
            <div class="innercanvas">Canvas-Left-1-1</div>
        </div>
        <div class="canvas">Canvas-Left-2
            <div class="innercanvas">Canvas-Left-2-1</div>
        </div>
    </div>

    <div id="col2">Canvas 0</div>

    <div id="col3">
        <div class="canvas">Canvas-Rigt-1
            <div class="innercanvas">Canvas-Right-1-1</div>
        </div>
        <div class="canvas">Canvas-Right-2
            <div class="innercanvas">Canvas-Right-1-1</div>
        </div>
    </div>
</div>​

CSS 

* {margin: 0; padding: 0;}
#wrapper {display: block; margin: 0 auto; width: 1000px; background-color: green; overflow: auto;}
#col1 {display: inline-block; width:200px; background-color: gray; position: relative; float: left;}
#col2 {display: inline-block; width:600px; background-color: yellow; position: relative; float: left;}
#col3 {display: inline-block; width:200px; background-color: blue; position: relative; float: left;}
.canvas {background-color: black; margin: 10px; color: white}
.innercanvas {background-color: purple; margin: 10px; color: white}​
0 голосов
/ 10 марта 2012

Может быть, это хорошая идея использовать CSS-фреймворк, такой как twitter bootstrap .

Его сборка для разных размеров экрана и кроссбраузера.Он также предлагает отзывчивый дизайн .

Посмотрите на сетку .

Об одном холсте внутри другого: 

<div class="row">
  <div class="span4">
    <div class="row">
      <div class="span4">..</div>
      <div class="span4">..  </div>
      <div class="span4">..</div>
    </div>
  <div class="span8">...</div>
</div>

Вы можете выполнять "неограниченное" вложение столбцовсм. «Вложенные столбцы» в документации, указанной выше.

...