, 도움이 필요합니다 (CSS)

-1

나는 프로필 페이지를 만드는 오전, 나는 맞은 편, 도움이 필요합니다 (CSS)

최대 18 개 이미지 (트위터 유사) 추종자 목록을 작성하고 싶습니다 나는 24 픽셀 X 24 픽셀 각 아이콘이 생각 . 첨부 된 이미지 당 패딩.

CSS를 사용하여 이것을 재현하는 가장 좋은 방법은 무엇입니까? 그건 쉽게 db에서 PHP를 사용하여 전파됩니다.

나는 가장 깨끗한 방법을 찾고 있습니다. 제발 제안. alt text

아마 우리는 다른 이미지의 1000을 다루는 것처럼 좋은 측정을 위해 던져진 프리 로더가 있습니다.

건배

글쎄, 내가 생각했던 것입니다. 는 CSS에서 다음

<ul class="icons"> 
    <li><img1></li> 
    <li><img2></li> 
    <li><img3></li> 
    <li><img4></li>

ul.icons li {display: inline;}

그러나 2 행을 추가해야합니다, 그래서 <ul>...</ul> 문제의 두 레이어를 생각했다, 내가 좋아하는 것 (20)가 표시되면 그 그리고 나서 우리는 18 행과 2 행 중 하나가 아닌 2 행 10 열을 표시합니다.

하지만 생각보다 깨끗한 것 같아요. php를 사용하여 루프를 기반으로 <li> ... </li> 태그를 반복하는 방법이 있습니다.

Plus 이미지 프리 로더에서 조정하고 싶었습니다. 그리고 이것들을 보았습니다. 로드를 처리하기 위해 js를 사용합니다.

출처

2010-11-28 422

우리와 공유하고 싶은 코드가 있습니까? –

아니요. 누구나 깨끗한 코드를 찾을 수 있는지 알고 싶습니다. 나는 반복적으로 어떻게 할 것인가에 대한 아이디어를 가지고 있지만, 좀 더 눈에 잘 띄지 않는 더 깨끗한 방법에 대해서는 전혀 모른다. – 422

나는 cod3z를 t3h 가질 수 있는가? –

이 마음에 드십니까? example

하거나 더, 당신은 ul 및 li 요소를 도랑 단순히 사업부 내부 이미지를 사용할 수 단순화 : 당신이 필요로하는 당신에게 두 행을 줄 것이다 다음과 같은 것이, example

출처

2010-11-28 20:35:18

예, 그렇기 때문에 원래 물었습니다. 그게 깨끗하고 눈에 거슬리지 :) 훌륭한, 지금은 우리가 PHP를 사용하여 루프를 생산할 수 있는지 확인하고 일치하도록 두 행에 카운트 너비를 설정해야합니다. – 422

왜 CSS에 배경 이미지가 있는지 잘 모르시겠습니까? html의 이미지와 똑같이 일치하는지, 아니면 그냥 "fill"을 데모하여 투명하게 설정 했는가? 내가 추측하고있는 것은 그 경우이다. – 422

내 관심사는 패딩입니다. 이미지에 이미 패딩처럼 보이게하는 경계선이 있습니다. – 422

이것은 특정 문제에 대한 Q &A의 웹 사이트가 아닙니까? 아니요. 제 의견으로는 우리가 당신을 위해 일하기를 원하는 것처럼 들립니다 ...

출처

2010-11-28 13:18:23 o01

하나의 ul 또는 ol 요소를 사용하여 각 li 요소에 fixed를주고 상대적으로 위치하는 부모 내에서 float : left를 사용하십시오. 총 너비는 부모 요소의 함수입니다. 따라서 수학을 수행하고 적절하게 설정하면 두 행을 가져옵니다.

출처

2010-11-28 20:31:00 karmajunkie

Q를 업데이트했다. li class = "toprow"와 li class = "bottomrow"같은가요? – 422

아니요, li 요소에 클래스를 추가 할 필요는 없습니다. CSS 만 사용하여 목표를 달성 할 수 있어야합니다. – karmajunkie

입니다 60 개 픽셀 상자의 : 이미지가 같은 예측 가능한 모든 차원 경우

<html> 
    <head> 
    <style> 
     #container{ 
     border:1px solid red; 
     position:absolute; 
     } 
     ul{ 
     list-style:none; 
     width: 180px; 
     margin:0px; 
     padding:0px; 
     } 
     ul li{ 
     float:left; 
     width: 52px; 
     margin:0px; 
     padding:3px; 
     border:1px solid black; 
     } 
    </style> 
    </head> 

    <body> 
    <div id="container"> 
     <ul> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
     <li>four</li> 
     <li>five</li> 
     <li>six</li> 
     </ul> 
    </div> 
    </body> 
</head>

, 당신은 부동 사용 표시를 건너 뛸 수 : 인라인 리 요소.

출처

2010-11-29 02:04:27 karmajunkie

문제 프로필에 다시 링크 할 이미지에 대한 href 링크를 추가 할 때 블랙에 이미지에 1px 테두리를 추가하면 이미지가 점프됩니다. 내가 뭘 잘못하고 있는지 잘 모르겠다. .iconsx { width : 420px; 테두리 : 1 픽셀 단색 흰색; 패딩 왼쪽 : 5px; 패딩 - 윗면 : 5px; } .iconsx img { 디스플레이 : 인라인 블록; 너비 : 32px; 높이 : 32px; background-color : white; margin-right : 4px; 여백 - 하단 : 4px; 테두리 : 1 픽셀 단색 #fff; } .iconsx img a : 링크 { 테두리 : 1 픽셀 단색 $ fff; } .iconsx img : 공중 전화, .iconsx img a : 공중 전화 { 국경 : 1px 단색 # 000; } – 422

: hover {border : 0px solid black;}와 같이 : hover pseudoclass에 대한 스타일을 정의하고 동일하게 링크 스타일을 정의하십시오. – karmajunkie

, 도움이 필요합니다 (CSS)

답변

관련 문제