같은 행의 이미지 정렬

일부 이미지를 정렬하는 데 문제가 있습니다. 나는 네 개의 이미지가 동일한 "행"에 줄을 얻으려고같은 행의 이미지 정렬

enter image description here

: 아래의 상황이 현재 어떻게 보이는지의 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); 
     }); 
    });

출처

2014-01-09 user3179778

당신은 이미 그 중 3 개가 연속적으로 나왔으므로 아마도 4 번째가 맞지 않을 것입니다. 아마도'selector : last-child {margin-right : 0}'과 같은 것이 도움이 될 것입니다. – davidpauljunior

질문에 관련 HTML 및 CSS 코드를 표시하십시오. http://jsfiddle.net을 추가하면 문제를 디버깅하는 데 도움이됩니다. –

[가능한 가장 쉬운 방법은 가로로 정렬 된 이미지입니까?] (http://stackoverflow.com/questions/21033759/easiest-way-to-vertically-align-horizontally-aligned-images) – joseeight

당신이 이미지가 포함 된 HTML 코드를 게시하시기 바랍니다 수 :

나는 각 이미지는 간단한 애니메이션을 가지고 추가 할? 일반적으로 css 스타일 "float : left"를 적용하고 사용 가능한 너비가 충분한 지 확인하여 추가 할 수 있어야합니다 (컨테이너의 패딩과 이미지의 여백을 계산하여 사용 가능한 너비를 결정해야합니다).

출처

2014-01-09 23:52:51 Cosmin

float:left을 사용하면 문제가 해결됩니다. 당신이 모든 이미지는 줄을 얻을 할 수있는

http://goo.gl/vtHg3b

출처

2014-01-10 00:14:20 user3024950

한 가지 방법은 (수레가 그렇게 사용) DOM의 외부에서 요소를 던져해야합니다. display : 인라인 블록 사용; 및 세로 정렬 : 위쪽;

예이 도움이

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 
}

희망을 참조하십시오.

출처

2014-01-10 00:18:06 Cam

코드를 보지 않고도 말하기는 어렵지만 이미지가 컨테이너에 맞지 않는 것처럼 보입니다. 공간이 부족할 때 그들을 떠 다니는 경우 요소는 다음 행으로 강제 실행됩니다. @davidpauljunior에서 언급했듯이 이미지에 적용되는 오른쪽 여백을 제거 할 수 있습니다. 이 작업을 수행하는 경우 너비 및 높이 값을 90 % (또는 필요한 것이 무엇이든간에) 줄이고 이미지 컨테이너에

background size: 90%;

을 적용하여 이미지의 크기를 축소 할 수 있습니다 (배경 속성에 의해 적용되는 경우). . 인라인 이미지 인 경우 모두 좋습니다. 그냥

img { 
    max-width:100%; 
}

를 사용하고있는 경우에는 제거는 인라인 요소에 치수를 적용했다. 희망이 도움이됩니다.

출처

2014-01-10 00:36:41 Davidicus

같은 행의 이미지 정렬

답변

관련 문제