0

だから私はページ レイアウトを複製しようとしています。それはページの高さいっぱいの画像で、右側にテキストがあります。テキストの幅は画像に応じて調整されるようですが、どのように行われるのか正確にはわかりません。 http://mcgarrybowen.com/en/People/Bill-Borrelle というページです。これがどのように行われたかについて何か考えはありますか?

これは私が試したものですが、うまく機能していません。次のように なります 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

とにかく、始めるために、このページでは、ウィンドウのサイズを変更すると、それに応じて男が拡大および縮小します（私に言わせれば、これはちょっと不気味です）。

とにかく、彼らは画像の幅を計算するためにjavascriptを使用しています。ただし、HTML+CSSだけで似たようなものを実装できます。

picコンテナとtextコンテナの幅を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 に答える
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 や post run js を避けたい場合。可能であれば、2 列のテーブルを使用することをお勧めします。

表のセルはコンテンツに基づいてサイズが変更され、すべてのブラウザーで信頼できます。テキストは縮小または拡大することができ、レンダラーはテキストが固定幅であると認識しないため、固定幅の画像はセルを押し出し、結果としてテキスト セルが小さくなります。

あなたがする必要がある唯一のことは、テーブルに幅を与えて、それが多かれ少なかれ必要なスペースを埋めることです.

于 2013-02-07T23:49:31.383 に答える