复制简单图像/文本布局的css和/或javascript

所以我试图复制一个页面布局，它是一个图像，是一个页面的全高，右边是文本。文本宽度似乎会根据图像的大小进行调整，我只是不确定它是如何完成的。这就是那一页，你有什么想法吗

这是我尝试过的，但效果不太好，如下所示：

关于

接受米特沃尔德培训的小提琴大师霍斯特·克洛斯（Horst Kloss）已使用精致的弦乐器和弓弦超过三十年。Kloss商店专门从事历史乐器和弓箭的维修、修复、鉴定和销售。克洛斯先生还提供了根据音乐家个人需求量身定制的声学调整、博物馆保护标准的应用，以保持乐器的完整性和价值，以及巴洛克风格的转换。克洛斯先生在为音乐家提供定制乐器方面经验丰富，该乐器的设计旨在防止过度使用综合症，同时保持调色、清晰度和投影的最大调节。


自1972年以来，霍斯特·克洛斯一直关注美国东海岸的著名收藏品，包括波士顿美术馆的历史弦乐器收藏品。他是全美不到一百名制琴师之一，其广泛的培训和高水平的技能使他成为美国小提琴和琴弓制造者联合会的正式会员。


霍斯特·克洛斯在音乐家和制作人中长大，他对音乐的热爱和对弦乐器的管理有着深刻的意识。14岁时，他在家乡密顿沃尔德（Mittenwald）开始了学徒生涯。密顿沃尔德是自16世纪以来的小提琴制作中心。他在德国南部的巴伐利亚州立小提琴制造学校接受正式培训，1964年获得熟练工文凭，1972年在约瑟夫·坎图谢尔的指导下获得硕士学位。1964年，随着更精细的乐器从欧洲大量流出，他移居美国，并在刘易斯父子公司为卡尔·贝克尔工作时接触了其中的许多乐器。Kloss先生在新罕布什尔大学小提琴工艺研究所指导乐器维修和修复课程。他在休斯顿和波士顿开了店，然后定居在马萨诸塞州的李约瑟。


霍斯特·克洛斯吸引了众多国际客户，其中包括许多杰出的演唱会表演者，他们珍视他一贯的高质量恢复和声音调整。他经验丰富的眼光和广泛的客户群使他特别适合于将细弦乐器的买家和卖家联系在一起

该布局基于此构建，并实现其功能

更新：这是一个开始。您应该真正使用类，而不是所有那些内联样式。它使修改布局变得非常容易

.wrapper{
宽度：100%；
}
.肖像{
身高：100%；
左：0；
位置：固定；
宽度：50%；
}
.文本{
浮动：对；
利润率：5%0；
最大宽度：30%；
宽度：自动；
}
...

hmmm所以我并不真的想要所有的响应，只是当它是文本左边的图像，以及如何调整时，必须有一种方法来设置css。可能有很多方法可以做到这一点，就像开发人员一样。你试过什么？

<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>

.wrapper {
    width:100%;
}
.portrait {
    height: 100%;
    left: 0;
    position: fixed;
    width: 50%;
}
.text {
    float: right;
    margin: 5% 0;
    max-width: 30%;
    width: auto;
}

<div class="wrapper">
    <div class="portrait">
        <img src="http://www.klossal.com/klossviolins/elements/horst.jpg" alt=""
        />
    </div>
    <div class="text">
...