Форум

Siend · #1 (**permalink**) 13.09.2015, 12:24

Есть три элемента:

DIV1 DIV2 DIV3

DIV1 - float:left
DIV2 - margin: auto; left:0; right:0;
DIV3 - float:left

При таком раскладе третий блок вылетает со строки, но если DIV2 добавить float:left то центрирование по центру между двумя блоками пропадает, и элемент DIV2 просто прицепляется к DIV1.
То есть задача расположить элементы след. образом:
DIV1 - прилепает к левому краю
DIV2 - находится между DIV1 и DIV3 строго по центру
DIV3 - прилепает к правому краю.

У всех элементов ширина неизвестна. Подскажите способы решения пожалуйста.

P.S.: хотелось бы обойтись без абсолютного позиционирования - блоки все же должны "видеть" друг друга.

EmperioAf · #2 (**permalink**) 14.09.2015, 10:39

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
}
.container {
  width: 100%;
  height: 300px;
  background-color: transparent;
  border: 1px solid green;
  text-align: center;
}
.div1 {
  float: left;

}
.div2 {
  display: inline-block;
}
.div3 {
  float: right;
}
</style>
</head>
<body>
  <div class="container">
  <div class="div1">первый</div>
  <div class="div2">второй</div>
  <div class="div3">третий</div>
  </div>
</body>
</html>

рони · #3 (**permalink**) 14.09.2015, 13:17

Siend,

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.container div {
  width: 100px;
  height: 100px;
  background-color: red;

}
.container {
  width: 100%;
  height:  auto;
  background-color: transparent;
  border: 1px solid green;
  text-align: center;
  display: flex;
  flex-wrap: nowrap ;
  justify-content: space-between;
}
body{
  margin: 0;
  padding: 0;
}

</style>
</head>
<body>
  <div class="container">
  <div class="div1">первый</div>
  <div class="div2">второй</div>
  <div class="div3">третий</div>
  </div>
</body>
</html>

Siend · #4 (**permalink**) 14.09.2015, 14:08

Спасибо, помогло)

Форум

Справочник

Discord чат

Курсы javascript