Форум

S.E.K.T.O.R. · #1 (**permalink**) 15.11.2015, 05:58

Доброго времени суток господа!
Помогите, пожалуйста решить задачку по CSS

Как можно сделать такое?

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

Что-то вроде этого

<div class="container" style="width: 100%">
	<div>div1</div>
	<div style="width="300px">div2 в центре контейнера</div>
	<div>div3</div>
</div>

Заранее благодарен за вашу помощь!

EmperioAf · #2 (**permalink**) 15.11.2015, 12:55

Скоро придут люди с

display:flex

и покажут как правильно сделать, но пока можете вот так:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>

* {
  margin:0;
  padding: 0;
  outline: none;
}

.container {
	width: 100%;
	height: 100px;
}

.container>div {
	display: inline-block;
	width: calc((100% - 300px)/2);
	height: 100px;
	background-color: red;
	margin-right: -4px;
}
.container .center {
	width: 300px;
	background-color: green;
}

</style>
</head>
<body>
<div class="container">
	<div></div>
	<div class="center"></div>
	<div></div>
</div>
</body>
</html>

ruslan_mart · #3 (**permalink**) 15.11.2015, 19:36

EmperioAf, calc не поддерживается на телефонах.

Проще тогда уж так:

.container {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.container > div {
    display: table-cell;
}

EmperioAf · #4 (**permalink**) 15.11.2015, 20:08

Сообщение от Ruslan_xDD

Проще тогда уж так:

Ок. Я стараюсь избегать применений табличной вёрстки (кроме применения по назначению)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>

* {
  margin:0;
  padding: 0;
  outline: none;
}

.container {
    display: table;
    table-layout: fixed;
	width: 100%;
	height: 100px;
}

.container div {
    display: table-cell;
    background: red;
}

  .container  .center {
      width:300px;
        background: green;
    }
</style>
</head>
<body>
<div class="container">
    <div></div>
    <div class="center"></div>
    <div></div>
</div>
</body>
</html>

ruslan_mart · #5 (**permalink**) 15.11.2015, 20:15

Сообщение от EmperioAf

Я стараюсь избегать применений табличной вёрстки

Ну в данном случае, это самое лучшее кросбраузерное решение. Флекс конечно лучше, но работает не везде, к сожалению.

S.E.K.T.O.R. · #6 (**permalink**) 15.11.2015, 22:02

EmperioAf, Ruslan_xDD, спасибо вам огромное за помощь!

ksa · #7 (**permalink**) 16.11.2015, 13:12

Сообщение от EmperioAf

Скоро придут люди с

display:flex

Флексбокс в этом деле не помощник...

sanmihan · #8 (**permalink**) 17.11.2015, 12:44

Сообщение от ksa

Флексбокс в этом деле не помощник...

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    display: flex;
    width: 100%;
    height: 100px;
}
.container div {
    flex-grow: 1;
    background: red;
}
.container .center {
    width: 300px;
    flex-grow: 0;
    background: green;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div class="center"></div>
<div></div>
</div>
</body>
</html>

ksa · #9 (**permalink**) 17.11.2015, 14:22

sanmihan, буду иметь ввиду.

Sonya · #10 (**permalink**) 14.12.2016, 16:38

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

Форум

Справочник

Discord чат

Курсы javascript