Сетка CSS 3x3: как сделать центр div единственным с фиксированной высотой / шириной? - PullRequest
Новая
       29

Сетка CSS 3x3: как сделать центр div единственным с фиксированной высотой / шириной?

2 голосов
/ 23 февраля 2012

Я боролся некоторое время, пытаясь создать сетку 3х3, в которой центральный элемент имеет фиксированную ширину и высоту, а остальные растут, чтобы соответствовать размеру окна по мере необходимости, но я не могу получить нецентрДивы вести себяЯ нашел несколько решений, которые работали для макета с двумя столбцами, но я не мог понять, как адаптировать их к трем.Вот что у меня получилось: http://jsfiddle.net/WGaVH/

Впервые в CSS, поэтому любая помощь очень ценится.Спасибо!

Ответы [ 3 ]

2 голосов
/ 23 февраля 2012

Вот что я разработал: http://jsfiddle.net/WGaVH/21/

Я немного упростил HTML. Есть некоторые совпадения с div, которые могут создавать некоторые проблемы в зависимости от того, что вы планируете делать с фоном (хотя не то, что не может быть обработано с другим вложенным div).

HTML 

<div id="wrapper">

    <div class="top left"><p><span id="topLeftContent">1</span></p></div>
    <div class="top mid"><p><span id="topCenterContent">2</span></p></div>
    <div class="top right"><p><span id="topRightContent">3</span></p></div>

    <div class="main left"><p><span id="mainLeftContent">4</span></p></div>
    <div class="main mid"><p><span id="mainCenterContent">
        <object width="84" height="60" align="middle"></object>5
    </span></p></div>
    <div class="main right"><p><span id="mainRightContent">6</span></p></div>


    <div class="bottom left"><p><span id="bottomLeftContent">7</span></p></div>
    <div class="bottom mid"><p><span id="bottomCenterContent">8</span></p></div>
    <div class="bottom right"><p><span id="bottomRightContent">9</span></p></div>

</div>

CSS (цвета только для демонстрации) 

    html, body{width:100%;height:100%;}
    html,body {margin:0;padding:0}

    #wrapper{width:100%;height:100%;background:#bbffbb;overflow:hidden;}

    .top, .main, .bottom {
       text-align:center;
       float: left;
       position: relative;
       background-color: #FFFFCC;
    }

   .top {
       height: 50%;
       margin-bottom: -30px;
   }
   .top p {
       margin-bottom: 30px;
   }
   .main {
       height: 60px;
       z-index: 2;
   }
   .bottom {
       height: 50%;
       margin-top: -30px;
   }
   .bottom p {
       margin-top: 30px;
   }
   .left {
       width: 50%;
       margin-right: -42px;        
   }
   .left p {
       margin-right: 42px;
   }
   .mid {
       width: 84px;
       z-index: 2;
   }
   .right {
       width: 50%;
       margin-left: -42px;
    }
   .right p {
       margin-left: 42px;
   }
   .main.mid {
       z-index: 3;
       background-color: #CCFFFF;
   }
   .mid {
       background-color: #FFFFFF;
   }
   .main {
       background-color: #FFCCFF;
   }
1 голос
/ 23 февраля 2012

Взгляните на http://jsfiddle.net/WgF7Z/1/.

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

Хитрость, позволяющая избежать наложения в этом примере, заключается в установке минимальной высоты / ширины в div обертки, которая в 3 раза больше высоты / ширины вашего div с фиксированным центром.

Кроме того, если CSS3 является опцией для вашего проекта, посмотрите Модель гибкой коробки CSS 3

0 голосов
/ 02 января 2013

Дисплей таблицы делает это легко: 

<style type="text/css">
    html, body {
        padding: 0;
        margin: 0;
    }
    .grid3x3 {
        display:table;
        height:100%;
        width:100%;
    }
    .grid3x3 > div {
        display:table-row;
        width:100%;
    }
    .grid3x3 > div:nth-child(2) {
        height: 100px;
    }
    .grid3x3 > div > div {
        display:table-cell;
    }
    .grid3x3 > div > div:nth-child(2) {
        width:100px;
    }

    div {
        outline: 1px solid orange;
    }


</style>
<div class="grid3x3">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>
...