1

Как можно по горизонтали расположить три фотографии с затемненными полосками содержащими ссылки (с селектором .photo-title), при этом дать промежуток между первой и второй, второй и третьей фотографией? border-spacing не подходит так как дает промежуток не только по внутренним отступам но и по внешним, а мне надо по внутренним.

.photo { 
  position:relative; margin-top: 10px;
}
.photo-title {
  left: 0;
  bottom:0;
  position:absolute;
  height:35px;
  background:#000;
  background:rgba(0,0,0,.5);	
  width:332px;
  font-size:1em;
  color:#fff;
  text-align:center;
  padding-bottom: 10px;

}
<div class="photo">
  <a href=""><img  src="img/img7.jpg" alt="" /></a>
  <div class="photo-title">
    <p><a href="">Продукт компании</a></p>
  </div>
</div>
<div class="photo">
  <a href=""><img  src="img/img8.jpg" alt="" /></a>
  <div class="photo-title">
    <p><a href="">Наши Услуги</a></p>
  </div>
</div>
<div class="photo">
  <a href=""><img src="img/img9.jpg" alt="" /></a>
  <div class="photo-title">
    <p><a href="">Информация о нас</a></p>
  </div>
</div>

1 ответ 1

1
.photo {
    float: left;/*блоки с фотографиями будут обтекать друг друга слева*/
}
.photo+.photo {
    margin-left: 10px;/*ваш отступ между ними, начиная со второго элемента*/
}
1
  • Спасибо большое вам! Все получилось!
    – Arty21
    22 янв 2014 в 12:11

Ваш ответ

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

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