Выравнивание изображений в пределах одной строки

Question

У меня возникли проблемы с выравниванием некоторых изображений. Ниже ScreenCap, как вещи в настоящее время выглядят:

Я пытаюсь получить все четыре изображения выстраиваются на одной и той же «строке». Любые будущие изображения начнутся в новой строке.

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

Я хотел бы добавить, что каждое изображение имеет простую анимацию:

 $(document).ready(function(){ 
     $("#id").hover(function(){ 
      $(this).stop().animate({opacity: 0.75, marginTop: -10}, 400); 
      },function(){ 
      $(this).stop().animate({opacity: 1.0, marginTop: 0}, 400); 
     }); 
    }); 

Answer 1

Можете ли вы размещать HTML-код, в котором образы включены? Как правило, вы можете добавить их, применив стиль css «float: left» и убедившись, что доступной ширины достаточно (убедитесь, что подсчитали заполнение контейнера и поля изображений, чтобы определить доступную ширину).

Answer 2

если вы используете float:left, это решит вашу проблему.

• http://goo.gl/vtHg3b

Answer 3

Один из способов вы можете сделать, чтобы получить все ваши изображения в линию и не должны бросить свои элементы вне DOM (с помощью поплавков сделать это). Использовать отображение: встроенный блок; и vertical-align: top;

См пример

img { 
    display: inline-block; // This will align your items side-by-side 
    vertical-align: top; // Why because by default Inline-block sets your vertical to baseline 
} 

Надеется, что это помогает.

Answer 4

Без просмотра кода сложно сказать точно, но похоже, что ваши изображения не помещаются в их контейнере. Если вы плаваете в них, когда вы закончите пробел, элементы будут перенесены в следующую строку. Вы можете попробовать, как упоминалось @davidpauljunior, удалить любые правые поля, применяемые к вашим изображениям. Если это не работает, вы можете уменьшить размер изображений (если применяется свойство фона), уменьшив значения ширины и высоты на 90% (или все, что вам может понадобиться) и примените
background size: 90%;

к изображениям контейнеров , Если это встроенные изображения, тем лучше. Просто используйте

img { 
    max-width:100%; 
} 

и удалить любые прикладные аспекты в строковый элемент. Надеюсь, это поможет.