Получение двух изображений для показа рядом с некоторыми сложностями

Question

Для навигации я использую кнопки «предыдущий / следующий». По причинам, это изображения, CSS которых устанавливает их фоновое изображение / высоту / и т. Д. Я использую их на всем сайте, и они отлично работают при выравнивании центра.

Теперь у меня есть эти два изображения, но мне нужно, чтобы они отображались рядом! (с некоторым интервалом между ними и весь шебанг по центру страницы)

Я пробовал возиться, но все, что я делаю, либо заставляет изображения выглядеть испорченными (например, попытка использовать столбцы начальной загрузки), либо не помещать их рядом (например, традиционные встроенные или что-то еще). Я не против обернуть их в несколько div, чтобы заставить его работать, но не могу изменить суть CSS изображения.

JSFiddle: https://jsfiddle.net/wgrLfxg3/1/

HTML

<div class="container-fluid">
  <div class="row">
    <img class="the-button center-block" />
    <img class="the-button center-block" />
  </div>
</div>

CSS

.the-button {
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;

    background-image: url(http://placehold.it/122x42);
    width: 122px;
    padding-left: 122px;
    height: 42px;

    margin-bottom: 1em;
}

html css twitter-bootstrap

1

Joshua Ohana 5 Мар 2015 в 00:08

Answer 1

Использование:

display: inline-block;

Должно сработать.

Вот скрипка. https://jsfiddle.net/plushyObject/wgrLfxg3/2/

2

plushyObject 4 Мар 2015 в 21:10

Answer 2

Самый простой способ, который я знаю, - это просто использовать JavaScript для рисования изображения на прозрачном холсте. Таким образом, вы сможете видеть предметы под ним, и вы сможете регулировать их размер, расстояние между ними, их местонахождение и т. Д.

Смотрите эти ссылки:

W3

html5canvastutorials

canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
document.body.appendChild(canvas);

ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'gray';
ctx.fillRect(5, 5, 310, 470);
ctx.fillRect(320, 5,315, 470);

https://jsfiddle.net/v4errq9r/

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

0

crank123 4 Мар 2015 в 21:38

Answer 3

Вам нужно отредактировать отступы, чтобы центрировать его add margin: 0 auto; и чтобы отображать их рядом, просто отобразите встроенный блок.

Вот код для исправления бок о бок:

.the-button {
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(http://placehold.it/122x42);
    width: 122px;    
    height: 42px;    
    margin-bottom: 1em;  
}

См. Пример здесь

https://jsfiddle.net/wgrLfxg3/3/

Вам нужно центрировать кнопки и в каком-то другом div?

1

Rodrigo Santiaborg 4 Мар 2015 в 21:18

Answer 4

<div class="container-fluid">
  <div class="row">
      <table>
       <tr> 
           <td><img class="the-button center-block" /></td>
           <td><img class="the-button center-block" /></td>
        </tr>
      </table>
   </div>
</div>

Попробуйте свернуть их в таблицу. Это может решить вашу проблему.
Таким же образом можно легко изменить расстояние между ними.
https://jsfiddle.net/wgrLfxg3/1/

1

Tim Hallyburton 4 Мар 2015 в 21:14

Получение двух изображений для показа рядом с некоторыми сложностями

4 ответа

Похожие вопросы

Новые вопросы

html