0

Помогите пожалуйста! Буду очень признателен!

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

divы должны всегда занимать всю ширину родительского дива, который тянется вместе с браузером.

В итоге должно получиться что-то типа этого:

введите сюда описание изображения

введите сюда описание изображения

<!DOCTYPE html>
<html>
<head>






    <style type="text/css">
        #wrapper {
        position: inherit;
            margin: 0 auto;


        }
        .section {
            border:solid 1px #999;
            float:left;
            height:250px;
            margin-left:10px;
            width:350px;
            margin-top: 15px;
        }
        #wrapper div:first-child {
            margin-left:10px;
        }
    </style>





</head>

<body>

<div id="wrapper">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>



</body>
</html>
5
  • разместите ваши div'ы ещё в один контейнер, а его спозиционируйте по центру
    – lexxl
    14 мар 2016 в 18:13
  • Так проблема не решается. Это не ответ на мой вопрос. В любому случае, спасибо, что откликнулись. 14 мар 2016 в 18:31
  • Автор, может сделайте тогда картинки со всеми состояниями и перефразируйте вопрос. По описанию не понятно должны дивы быть фиксированной ширины или "должны всегда занимать всю ширину родительского дива, который тянется вместе с браузером". итд
    – user31906
    15 мар 2016 в 6:46
  • Cпасибо всем участникам. Проблему решил. 16 мар 2016 в 11:25
  • 1
    Пожалуйста, не отвечайте фразой «спасибо». Вместо этого, отметьте лучший ответ как принятый (галка напротив выбранного ответа). - Из очереди проверок
    – Streletz
    16 мар 2016 в 12:16

4 ответа 4

1

А может вам нужно это. При изменении ширины родительского div-а внутренние тоже изменяются

#wrapper{
  width: 600px;
  border: 1px solid red;
  display: table-cell;
  text-align: center; /* выравниваем по горизонтали */
  vertical-align: middle; /* выравниваем по вертикали */
  }

.section {
width: 32%;
  height: 100px;
  display: inline-block;
  border: 1px solid #000;
}
<div id="wrapper">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

0

#wrapper{
  width: 600px;
  border: 1px solid red;
  display: table-cell;
  text-align: center; /* выравниваем по горизонтали */
  vertical-align: middle; /* выравниваем по вертикали */
  }

.section {
width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid #000;
}
<div id="wrapper">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

4
  • Вы же видите, что у вас они по левому краю страницы, и при уменьшении они не встают друг под дружку. При уменьшении должны оставаться так же по центру страницы ) 14 мар 2016 в 19:01
  • для наглядности поправил код, блоки по центру wrapper и если уменьшить его ширину то блоки будут тоже по центру 14 мар 2016 в 19:07
  • Даже не знаю, это шутка? :( fiddle.jshell.net Как же они по центру то? prntscr.com/afcx78 15 мар 2016 в 0:19
  • просто в моем коде стоит фиксированная ширина вам нужно поставить относительную вот здесь стоит относительная fiddle.jshell.net/x2bxc0hb/2 15 мар 2016 в 5:26
0

Вот так что-ли?

#wrapper {
  position: inherit;
  margin: 0 auto;
  text-align: center;
}

.section {
  border: solid 1px #999;
/*   float: left; */
  display: inline-block;
  height: 250px;
  margin-left: 10px;
  width: 350px;
  margin-top: 15px;
}

#wrapper div:first-child {
  margin-left: 10px;
}
<div id="wrapper">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

1
0

Как вариант:

#wrapper {
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 550px;
  height: 100px;
  text-align: center;
  background-color: #44a527;
}
.section {
  border: solid 1px #999;
  height: 150px;
  margin-left: 10px;
  width: 150px;
  margin-top: 15px;
  display: inline-block;
}
<div id="wrapper">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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