Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Расположить три div в одну строку с заданной шириной (https://javascript.ru/forum/xhtml-html-css/59525-raspolozhit-tri-div-v-odnu-stroku-s-zadannojj-shirinojj.html)

S.E.K.T.O.R. 15.11.2015 05:58
Расположить три div в одну строку с заданной шириной
 
Доброго времени суток господа!
Помогите, пожалуйста решить задачку по CSS :)

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


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

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


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

EmperioAf 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 15.11.2015 19:36
EmperioAf, calc не поддерживается на телефонах. :)

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

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

EmperioAf 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 15.11.2015 20:15
Цитата:
Сообщение от EmperioAf
Я стараюсь избегать применений табличной вёрстки
Ну в данном случае, это самое лучшее кросбраузерное решение. Флекс конечно лучше, но работает не везде, к сожалению.

S.E.K.T.O.R. 15.11.2015 22:02
EmperioAf, Ruslan_xDD, спасибо вам огромное за помощь!

ksa 16.11.2015 13:12
Цитата:
Сообщение от EmperioAf
Скоро придут люди с
display:flex
Флексбокс в этом деле не помощник... :no:

sanmihan 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 17.11.2015 14:22
sanmihan, буду иметь ввиду. :yes:

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


Часовой пояс GMT +3, время: 06:19.