Выложите четыре изображения внутри div [отзывчивый]

Question

Выложите четыре изображения внутри div [отзывчивый]

0

У меня есть div, называемый Buttons со 100% width внутри плавающей sidebar. Боковая панель имеет 30% width.

Внутри Buttons div у меня есть четыре ссылки с фоновыми изображениями. Я хочу центрировать четыре ссылки внутри div, но они должны распространяться (все они имеют одинаковый запас, но левый должен быть полностью левым, а правый - полностью правильным). Но: он также должен работать внутри моего адаптивного веб-сайта. Поэтому, если я изменяю размер окна, они также должны быть центрированы. Вот почему я не могу устанавливать поля в пикселях.

Пожалуйста, помогите мне!

Извините за мой английский.

[EDIT: Мой код]:

HTML:

<div id="sidebar">
    <div id="buttons">
        <a id="twitter" href="http://www.twitter.com" title="Twitter" target="_blank"></a>
        <a id="facebook" href="http://www.facebook.com" title="Facebook" target="_blank"></a>
        <a id="rss" href="rss.php" title="RSS" target="_blank"></a>
        <a id="youtube" href="http://www.youtube.come" title="YouTube" target="_blank"></a>
    </div>
</div>

CSS:

#sidebar{
    float:right;
        width:30%;
    text-align:center;
}

#buttons{
    width:100%;
}

#twitter,#facebook,#rss,#youtube{
    height:40px;
    display: inline-block;
    margin-top:20px;
}


#twitter{width:40px;}
#twitter{background:url('/images/icons.png') 0 0;}
#facebook{width:40px;}
#facebook{background:url('/images/icons.png') -40px 0;}
#rss{width:40px;}
#rss{background:url('/images/icons.png') -80px 0;}
#youtube{width:40px;}
#youtube{background:url('/images/icons.png') -120px 0;}

Jordy 03 окт. 2013, в 23:33

Источник

Теги:

html

css

responsive-design

center

2 ответа

1

Используйте text-align: justify в элементе #buttons чтобы #buttons элементы кнопки идеально и позволить им #buttons реагировать в пространстве.

Добавить text-align: justify по элементу #buttons
Добавьте #buttons:after со 100% шириной, чтобы заставить кнопки заполнить всю боковую панель

Вот рабочий пример JSbin.

И вот код для вашей ситуации:

HTML:

<div id="sidebar">
  <div id="buttons">
    <a id="twitter" href="#">1</a>
    <a id="facebook" href="#">2</a>
    <a id="rss" href="#">3</a>
    <a id="youtube" href="#">4</a>
  </div>
</div>

CSS:

#buttons {
  text-align: justify;
  width: 100%;
}

#buttons:after {
  content: '';
  display: inline-block;
  width: 100%;
}

#buttons a {
  display: inline-block;
  height: 40px;
  width: 40px;
}

Этот метод более подробно описан здесь: http://www.barrelny.com/blog/text-align-justify-and-rwd/

tinystride 03 окт. 2013, в 21:29

Ещё вопросы

Shawn Wernig · Accepted Answer · 2013-10-03T21-02-00.000Z

Видеть ваш код определенно поможет, но я предполагаю, что вы ищете что-то вроде этого:

--редактировать--

Итак, похоже, нам нужно полностью позиционировать эти кнопки, поэтому попробуйте:

#buttons {  
  position: relative;
  min-height: 40px;
}
#buttons > a {
  position: absolute;
  width: 40px;
  height: 40px;
}

a#twitter { background: red; left: 0px; }
a#facebook { background: orange;  left: 36%; margin-left: -20px; }
a#rss { background: yellow; left: 64%; margin-left: -20px; }
a#youtube { background: green; right: 0px;}

Aaand скрипка: http://jsfiddle.net/ttjAW/9/

Возможно, вам придется корректировать left проценты, потому что кнопки имеют фиксированную ширину (ее трудно сделать с помощью элементов фиксированной и переменной ширины...) Затем я применил negative margin половины ширины кнопок, чтобы центрировать их.

Делает ли это то, что вам нужно?

Спасибо! Смотрите мой обновленный код. Поля должны соответствовать ширине окна, но кнопки имеют стандартный размер, например 40 пикселей.
Привет Джорди, обновил мой ответ. Забыл включить ваши фоновые изображения в CSS, но я уверен, что вы получите картинку.