0

Здравствуйте. Имеется интересное задание.

<div class="slider">
   <div class="1s">1st slide</div>
   <div class="2s">2nd slide</div>
   <div class="3s">3d slide</div>
</div>

CSS:

.1s {
float: left;
}

.2s {
margin: 0 auto;
}

.3s {
float: right;
}

.slider div {
width: 200px;
}

Суть проблемы: 1й div выравнивать по левой стороне, 3й - по правой, а центральный по центру. Текст в каждом блоке выравнивается по левой стороне. Центральный блок имеет минимальный отступ 150 пикселей от обоих блоков.

У меня получается в этом способе, что 3 слайд сползает вниз, не могу придумать, как сделать его inline

4
  • А в чем причина?
    – soledar10
    2 ноя 2013 в 11:40
  • он резиновый. Второй блок всегда должен быть по центру и при сужении быть иметь минимальный отступ 150 пикселей
    – redfcv
    2 ноя 2013 в 11:46
  • А размеры первого и третьего какие? Мало инфы. 2 ноя 2013 в 12:41
  • поправил немного условие, чтобы было понятнее
    – redfcv
    2 ноя 2013 в 12:45

1 ответ 1

1

Так как я флоатами ничо не делаю, представляю свое решение:

  .slider {
    position:relative;
    }
    .s1 {
    left:0;
    top:0;
    width:200px;
    position:absolute;
    }
    .s2 {
    right:0;
    top:0;
    width:200px;
    position:absolute;
    }
    .s3 {
    padding: 0 215px;
    }
3
  • все хорошо, только если мне надо, чтобы и центральная колонка была 200 пикселей шириной?
    – redfcv
    2 ноя 2013 в 12:57
  • Хм, тогда какая это резина? 2 ноя 2013 в 13:05
  • 1
    1й и 3й слайды крепятся к левой и правой границе, а 2й слайд всегда посередине. Но я впринципе додумал решение, с вашей наводкой, спасибо.
    – redfcv
    2 ноя 2013 в 13:13

Ваш ответ

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

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