CSS/javascript 페이지를 복제하려고합니다.

Question

페이지 레이아웃을 복제하려고합니다. 오른쪽의 텍스트가있는 페이지의 전체 높이 이미지입니다. 텍스트 너비가 이미지에 따라 조정되는 것처럼 보입니다. 어떻게 완료되었는지 정확히 알 수는 없습니다. http://mcgarrybowen.com/en/People/Bill-Borrelle 그게 무슨 페이지에 대한 생각, 어떻게 했어?

<div style="width:100%;padding-top:40px;padding-bottom:40px;"> 
<div style="width:920px;position:relative;"> 
    <div style="float:left;"> 
     <img style="height:100%;" src="http://www.klossal.com/klossviolins/elements/horst.jpg" alt=""> 
    </div> 
    <div style="float:left;"> 
    <p style="color: #b9b8b4; 
     font-family: 'Source Sans Pro' , sans-serif; 
     font-size: 24px; 
     text-align: left; 
     position:relative; 
     width:auto;">About</p>    

    <p style="color: #b9b8b4; 
     font-family: 'Source Sans Pro' , sans-serif; 
     font-size: 14px; 
     text-align: left;  
     position:relative; 
     width:auto;"> 
     Mittenwald-trained, Master Violin Maker, Horst Kloss, has worked with fine stringed instruments and bows for over three decades. The Kloss Shop specializes in the repair, restoration, appraisal and sale of historic instruments and bows. Mr. Kloss further offers acoustic adjustment tailored to the individual musician's requirements, the application of museum conservation standards to preserve instrument integrity and maintain value as well as baroque conversion. Mr. Kloss is experienced in providing musicians with custom instrument set up designed to prevent overuse syndrome while maintaining maximal adjustment of tonal color, clarity and projection.<br><br> 

     Since 1972, Horst Kloss has cared for collections of note along the East Coast of the United States, including the Boston Museum of Fine Art's collection of historic stringed instruments. He is one of under a hundred makers, nation-wide, whose extensive training and high caliber skills qualified him for full membership status in the American Federation of Violin and Bow Makers.<br><br> 

     Raised among musicians and makers, Horst Kloss was imbued with a love of music and a profound sense of stewardship in caretaking for stringed instruments. At the age of 14, he began an apprenticeship in his hometown of Mittenwald, a center for violin-making since the 1600's. He received his formal training at the Bavarian State School of Violin Making in Southern Germany where he earned his Journeyman's diploma in 1964 and his Master's degree in 1972 under the tutelage of Josef Kantuscher. He moved to the United States in 1964 following the exodus of finer instruments from Europe and gained exposure to many of them while working for Carl Becker at Lewis & Sons. Mr. Kloss instructs the courses offered in instrument repair and restoration at the University of New Hampshire's Violin Craftsmanship Institute. He established shops in Houston and Boston before settling in Needham, Massachusetts.<br><br> 

     Horst Kloss has attracted an international clientele, including many distinguished concert performers, who value his consistently high quality restoration and sound adjustments. His experienced eye and broad client base make him especially well-suited to bring buyers and sellers of fine stringed instruments together.</p> 
     </div> 
     <br class="clear"> 

</div> 

Answer 1

그냥 당신이 여기에서 시작하는 이미지 옆에 텍스트를 표시하는 방법의 간단한 예는 다음과 같습니다 http://www.klossal.com/klossviolins/about.html처럼이이 내가 시도했지만 꽤 잘 작동하지 않는 것입니다

는

보인다 :

http://jsfiddle.net/g5wpt/

<img class="SomeImage" src="http://www.klossal.com/klossviolins/elements/horst.jpg" alt=""> 
<span class="SomeText">Some text next to the image</span> 

CSS 파일

0123을에 가야 다음

.SomeImage{ 
    max-width:80%;/*give some room for your text*/ 

} 
.SomeText{ 
    vertical-align:top; 
} 

참고로 css는 CSS 클래스이며 인라인이 아닙니다. 또한, 당신이 작동하지 않는 이유는 서로 옆에 블록 요소가있어 다음 줄로 감쌀 것이기 때문입니다.

또 다른 옵션은 테이블을 사용하는 것입니다. http://jsfiddle.net/g5wpt/2/

Answer 2

다소 까다로운 CSS 또는 게시 실행 js를 피하려면. 가능한 경우 2 열 표를 사용하는 것이 좋습니다.

표 셀은 내용을 기준으로 크기가 조정되며 모든 브라우저에서 신뢰할 수 있습니다. 텍스트가 줄어들거나 늘어날 수 있고 렌더러가 고정 된 너비로 보이지 않기 때문에 고정 너비 이미지가 셀을 밀어 내고 결과적으로 텍스트 셀이 작아집니다.

당신이해야 할 일은 필요한 공간을 채우도록 테이블 너비를 제공하는 것입니다.

Answer 3

어쨌든 시작하려면이 페이지에서 창 크기를 조정하면 그에 따라 성장하고 줄어 듭니다 (내게 묻는다면 일종의 오싹합니다).

어쨌든, 그들은 자바 스크립트를 사용하여 그림의 너비를 계산합니다. 그러나 HTML + CSS만으로도 비슷한 것을 얻을 수 있습니다.

그림 컨테이너와 텍스트 컨테이너의 너비를 50 %로 설정하면됩니다. 여기

은 예입니다 :

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>test</title> 
     <style> 
      #container { 
       width: 100%; 
      } 

      #text { 
       width: 48%; 
       float: left;     
      } 

      #pic-container { 
       float: left; 
       height: 50%; 
      } 

      #pic { 
       height: 100%; 
      } 

     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="pic-container"> 
       <img id="pic" src="http://mcgarrybowen.com/~/media/A6896FA26F97436E899BCE3307FFC1C2.ashx?as=0"/> 
      </div> 
      <div id="text"> 
       Some really cool text lorem ipsum 
      </div> 
      <div style="clear: both"></div> 
     </div> 
    </body> 
</html>