이미지 위치 고정

본 목록이 있습니다
http://pastebin.me/dde64f8c185de9dd5e429f84701a01ce
언제든지 이미지를 클릭하면 추가 콘텐츠가 표시됩니다. 몇 가지 CSS 방법을 tryed있다 그러나 나는 그들의 위치에 남아 이미지가 텍스트 아래에 갈 얻을. 누구나 해결책이 있습니까?이미지 위치 고정

출처

2010-06-14 andrei

가 좋아, 여기에 해결이 HTML입니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <title>Test Page</title> 

    <style type="text/css"> 
     * { margin: 0; padding: 0;} 

     .holder { width:105px;float:left; } 

       img { width: 105px; 
      float:left; 
        } 

     .content { 
      display:none; 
      float:left; 
      } 

       #container { width:350px;margin:auto; } 
    </style> 

    <script type="text/javascript" src="http://www.feetjeans.com/new_fj/nou/jquery.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 

     $('img').click(function(){ 
      var clasa = $(this).attr("class"); 
      var divul = '#' + clasa; 
      var cssul = $(divul).css('display'); 
      if(cssul == 'none') { $(divul).fadeIn(500); } 
      else $(divul).hide(500); 
         console.log('test'); 
     }); 

}); 

    </script> 

</head> 

<body> 
    <div id="container"> 
     <div class="holder">      
        <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="0" align="left" /> 
        <span class="content" id="0">This is content</span> 
       </div> 
     <div class="holder">      
        <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="1" /> 
        <span class="content" id="1">This is content</span> 
       </div> 
    </div> 
</body> 

</html>

UPDATE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <title>Test Page</title> 

    <style type="text/css"> 
     * { margin: 0; padding: 0;} 

     .holder { width:350px;float:left; } 

       img { width: 105px; 
      float:left; 
        } 

     .content { 
      display:none; 
      border: 1px #09f solid; 
      } 

     #container { width:350px;margin:auto; } 
    </style> 

    <script type="text/javascript" src="http://www.feetjeans.com/new_fj/nou/jquery.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 

     $('img').click(function(){ 
      $(".content").hide("fast"); 
      var clasa = $(this).attr("class"); 
      var divul = '#' + clasa; 
      var cssul = $(divul).css('display'); 
      if(cssul == 'none') { $(divul).fadeIn(500); } 
      else $(divul).hide(500); 
         console.log('test'); 
     }); 

}); 

    </script> 

</head> 

<body> 
    <div id="container"> 
     <div class="holder">      
        <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="0" /> 
        <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="1" /> 
        <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="2" /> 
        <div style="clear:both;"></div> 
        <div class="content" id="0">This is content</div> 
        <div class="content" id="1">This is content</div> 
        <div class="content" id="2">This is content</div> 
     </div> 
     <div class="holder">      
        <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="3" /> 
        <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="4" /> 
        <img src="http://img21.imageshack.us/img21/1706/vansf.jpg" class="5" /> 
        <div style="clear:both;"></div> 
        <div class="content" id="3">This is content</div> 
        <div class="content" id="4">This is content</div> 
        <div class="content" id="5">This is content</div> 
     </div> 
    </div> 
</body> 

</html>

출처

2010-06-14 10:02:01 Starx

가 꽤 .. 내가이 HTTP 같은 것을 원하는 버튼을 하나 이상 추가하면 같은 문제 : // pastebin.me/f88c85d5b565d4354f63b10345c6fd35하지만 테이블/tr/td 형식은 제외 – andrei

좋아, 업데이트를보고, 그것은 당신이 원하는 것과 다소 비슷합니다 – Starx

와우 덕분에 많이 먹었어요. – andrei

콘텐츠를 잘못된 방법으로 표시하려는 경우 check out this jsFiddle example I've been working with 버튼을 이미지로 바꾸십시오. 적어도 올바른 방향으로 밀어 넣어야합니다.

희망이 있습니다.

출처

2010-06-14 09:51:23 Kyle

내가 – andrei

이미지 위치 고정

답변

관련 문제