0

So I'm trying to replicate a page layout, it's an image that is the full height of a page with text to the right of it. The text width seems to adjust depending on the the image, I'm just not exactly sure how it's done. http://mcgarrybowen.com/en/People/Bill-Borrelle that's the page, any thoughts on how this was done?

this is what I tried but isn't quite working right, looks like this http://www.klossal.com/klossviolins/about.html :

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

3 回答 3

0

只是为了让您从这里开始，这是一个如何在图像旁边显示文本的简单示例：

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

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

}
.SomeText{
    vertical-align:top;
}

请注意，css 在 css 类中，而不是内联。此外，你的不工作的原因是因为你有块元素彼此相邻，这将导致它换行到下一行。

另一种选择是使用表格。http://jsfiddle.net/g5wpt/2/

于 2013-02-07T23:49:24.937 回答
0

如果您宁愿避免一些棘手的 css，或者发布运行 js。如果可能的话，我可能会建议使用一个包含两列的表格。

表格单元格将根据内容自行调整大小，并且在所有浏览器中都是可靠的。因为文本可以缩小或增长，并且渲染器不会将其视为具有固定宽度，所以固定宽度的图像会将其单元格推出，结果文本单元格将变得更小。

你唯一需要做的就是给表格一个宽度，这样它就可以填满必要的空间，而不是更多或更少。

于 2013-02-07T23:49:31.383 回答
0

无论如何，为了让你开始，在这个页面中，当你调整窗口大小时，花花公子会相应地增长和缩小（如果你问我，这有点令人毛骨悚然）。

无论如何，他们正在使用 javascript 来计算图片的宽度。但是，您可以单独使用 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>
于 2013-02-08T00:01:19.017 回答