5

Здравствуйте. Хотелось бы, чтобы вы поделились своими рецептами кроссбраузерного(ie8+) деления дива на 3х3 только в процентах и только на дивы. Запрещается использовать адаптивные фреймворки и флексы.

.table {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  height: 100%;
  background: white;
  font-size: 0;
  }

.table div {
    width: 33.33333333333333333333%;
    height: 33.3333333333333333333%;
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    font-size: 0;
  }
<div class="table">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<div class="social">
<a href="" target="blank"><div><i class="icon-vkontakte"></i></div></a>
<a href="" target="blank"><div><i class="icon-facebook"></i></div></a>
<a href="" target="blank"><div><i class="icon-github-circled"></i></div></a>
<a href="" target="blank"><div><i class="icon-linkedin-squared"></i></div></a>
</div>

На всех браузерах отображается корректно, но для Safari нужно прописывать в .table display: table. А Firefox не отображает все корректно.

6
  • 1
    вставить в него таблицу 3х3
    – Grundy
    24 апр 2016 в 19:03
  • Изменил вопрос, нужно поделить див на дивы 24 апр 2016 в 19:06
  • Укажите насколько кроссбраузерно? IE5 may be?
    – user207618
    24 апр 2016 в 19:15
  • Нужно чтобы поддерживал ie8+ 24 апр 2016 в 19:17
  • А как Вы попытались решить эту задачку? Тут всё-таки помощь, а не free freelance.
    – user207618
    24 апр 2016 в 19:20

2 ответа 2

2

Сноси font-size и делай по-человечески:

* {
  box-sizing: border-box;
}

.table {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  height: 100%;
  background: white;
  border: 1px dotted green;
}

.table div {
  width: 33.33333333333333333333%;
  height: 33.3333333333333333333%;
  display: inline-block;
  vertical-align: top;
  border: 1px dotted red;
}
<div class="table">
  <div>
    Вставить
  </div><div>
    содержимое
  </div><div>
    легко
  </div><div>
    просто
  </div><div>
    не
  </div><div>
    надо
  </div><div>
    трогать
  </div><div>
    сочетание
  </div><div>
    &lt;/div&gt;&lt;div&gt;
  </div>
</div>

i {
  display: inline-block;
  width: 32px;
  height: 32px;
}

.icon-vkontakte { background-image: url(//vk.com/favicon.ico); }
.icon-facebook { background-image: url(//www.facebook.com/favicon.ico); }
.icon-github-circled { background-image: url(//github.com/favicon.ico); }
.icon-linkedin-squared { background-image: url(//ru.linkedin.com/favicon.ico); }

a {
  display: inline-block;
  width: 50%;
  height: 50%;
}

a:hover {
  background: silver;
}

html, body, div {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div class="social">
  <a href="http://vk.com" target="blank">
    <div><i class="icon-vkontakte"></i></div>
  </a><a href="https://www.facebook.com" target="blank">
    <div><i class="icon-facebook"></i></div>
  </a><a href="https://github.com" target="blank">
    <div><i class="icon-github-circled"></i></div>
  </a><a href="https://ru.linkedin.com" target="blank">
    <div><i class="icon-linkedin-squared"></i></div>
  </a>
</div>

10
  • Слушай, объясни пожалуйста, в чем фишка тут? Почему 8 блоков обернуты в 1 и отображается 9 блоков? Не укладывается в голове 24 апр 2016 в 20:43
  • @АлексейКраснов, обёрнуты 9 блоков, как было у тебя. Я просто переносы строк переставил, чтобы пробелы убрать. По ссылке посмотри про пробелы между inline-блоками. Ну и vertical-align top устраняет расстояние между base-line и низом строки.
    – Qwertiy
    24 апр 2016 в 20:48
  • Слушай, а как вставить в каждый див по элементу, допустим еще 1 див , не нарушая конструкцию, чтобы не появились пробелы? 24 апр 2016 в 20:57
  • @АлексейКраснов, легко. Обновил ответ.
    – Qwertiy
    24 апр 2016 в 21:03
  • Слушай, тут такой вопрос появился. В общем при входе на сайт через мобилу эти блоки встают в display: block и width:100%. Все работает хорошо, только вот в самом низу остается под последнем блоком есть пустое место небольшое, я как понял это тот самый промежуток, от которого я избавлялся. Как его убрать? 28 апр 2016 в 17:27
0

Нет IE8 под рукой, но должно работать и там:

.table {
  width: 300px;
  height: 300px;
  display: table;
}
.row {
  display: table-row;
}
.row div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 33%;
  height: 33%;
}
<div class='table'>
  <div class='row'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class='row'>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  <div class='row'>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</div>

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.