이상한 플로트/여기에서 찾을 수 있습니다 나는 내 친구를 위해이 시작 페이지에서 일하고 있어요 (동적 크기 조정 포함) 사용자 정의 시작 페이지 폭 문제 (

Question

:

http://seekoften.com/EDMfact/

내가하고 싶어 각 소셜 미디어 아이콘은 호버의 상자 그림자 용이성과 함께 링크가 될 수 있습니다. 나는 앵커 태그가 전체 소셜 미디어 이미지에 영향을 미치기 쉽도록 블록으로 표시되어야하지만, 디스플레이 블록, 인라인 대신 가로로 배열하려고 할 때 문제가 남았습니다.

너비가 사용 된 전체 크기 이미지 (500px x 500px)의 경우 li의 너비가 강요되므로 모든 것을 다음 줄로 강제로 이동합니다.

저는 누군가가 같은 라인에있는 모든 소셜 아이콘을 얻고 뷰포트의 너비에 따라 동적으로 크기를 조정할 수있게되기를 바랍니다.

또한 가능하다면 누군가가 머리글 이미지 (EDMfact 및 Ravergirls)를 복사 할 수없는 방법을 가르쳐 줄 수 있으면 좋겠다. & 드롭 등을 드래그 할 수있다. 나는 그들에게 배경 이미지를 만들어서 시도했다. 그 div하지만 동적으로 그것을 적절한 높이로 강제하는 것은 어려웠습니다.

미리 감사드립니다. 사람들이 나를 바르게 도울 수 있기를 바랍니다. 나는 이것을 몇 시간 동안 일해 왔으며 이것을 어떻게 조절해야하는지에 대한 총체적 인 손실을 보았습니다. 어떤 도움이든 &의 조언은 크게 감사 할 것입니다.

Answer 1

이 대답은 당신이 수정해야하는 것은, 어쨌든 ... 단지 당신에게 유용 할 것입니다 :

: 여전히 그림자를 수정, 그래서 img 태그에 그림자를 이동하지 않습니다

.social ul { 
    display: block; 
} 
.social ul li { 
    display: inline; 
    /* float: left; <---REMOVE */ 
} 
.social ul li a { 
    display: inline; 
    /* display: block; <---REMOVE */ 
    /* float: left; <---REMOVE */ 
} 

.social ul li a:hover img { 
    box-shadow: 0 0 3px #f7f731; 
} 

Answer 2

먼저 이미지를 500px x 500px로 표시하여 32px x 32px (또는 비슷한 크기)로 표시하면 안됩니다. 이렇게하면 방문자에게 대역폭이 발생하고 성능 문제가 발생할 수 있습니다. 사용자가 설정 한 4 개 이미지에

: 스타일 = "너비 : 32px"너비 = "10 %" 와 이것을 대체하십시오

다음 파일 :있는 style.css를, 라인 주위에 110 당신 것 가지고있다 : 전시 : 구획; 변경 : 표시 : 인라인;