0

Имеется блок DIV с фиксированной шириной. В него вложено 3 блока DIV. Нужно отобразить их друг за другом и задать отступ между ними в 10px

Но так задать, чтобы по краям от родительского блока, крайних блоков, отступов не было. Отступы только между блоками

2 ответа 2

1

как вариант:

html:

<div class="main">
  <div>раз</div>
  <div class="Two">два</div>
  <div>три</div>
</div>

css:

.main div{
  display: block;
  float:left;
width:10px;/*ваши размеры*/
height:10px/*ваши размеры*/
}

.two{
  margin: 0px 10px;
  display: block;
}

Еще можно сделать с помощью ":first-child" и ":last-child"

3
  • jsfiddle.net/634D7 что-то отступов не вижу
    – MDJHD
    12 апр 2014 в 15:45
  • 1
    там Two - T - большая, необходим класс .Two
    – soledar10
    12 апр 2014 в 15:55
  • попробуйте для класса "Two" следующее: .main div.two{ margin: 0px 20px; display: block; } и как рекомендовал предыдущий комментатор использовать одинаковые стили написания селекторов по строчным\заглавным буквам.
    – user2771
    12 апр 2014 в 16:03
0

.main {
  white-space: nowrap;
  width: 320px;
  height: 100px;
  background-color: yellow;
}
.main .inner {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: blue;
  margin-right: 10px;
}
.main .inner:last-child {
  margin-right: 0;
}
<div class="main">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

Ваш ответ

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

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