5

このすべてにまだ新しい謝罪。私はウェブページを作成していて、2 つの別々の div に画像とテキストが隣り合っています。ページの好きな場所に配置できましたが、ページのサイズを変更すると、テキストのサイズは変更されますが、画像のサイズは変更されません。テキストの下部を常に画像の下部に揃えたい。

どんな助けでも大歓迎です！コードは次のとおりです。

<head>

    <title>Stefano Mocini</title>
    <link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'>
    <link href='styles/style.css' rel='stylesheet' type='text/css'>
</head>

<body>

    <div id="title">
        Stefano Mocini
    </div>

    <div id="decal">
        <div id="image">
            <img src="images/tree.png" alt="tree" width="600" height="900">
        </div>      
    </div>

    <div id="about">
        <p>THANK YOU SO MUCH FOR YOUR REVIEWS; YOUR DONATION AND FOR SHARING MY MUSIC!!!</p>

        <p>About me: I started made music when I was only 6, because in the computer there was installed fruity loops, and I used it like a game. but i soon started to try to reproduce what i listened in the radio, so, step by step, i started to learn how to use this softwer. After i started to play the keyboard, that I received like christmast gift. One day I listened to "Back to life" from Allevi, and I loved it so much that I started to play the piano, every day. Step by step i learned how to make music, and how music is made . So now i can use the softwer whereby I played whan i was a child to make my own music. What kind of music should I make? Simply the one that I like!</p>

        <p>You can use my music for making non-commercial videos or projects, but please put the title of the song and the author in the description otf the video or in the  credits of the video.</p>

        <p>Commercial use of my music: by the PRO license, or contact me</p>
    </div>

</body>


body {
font-family: 'Milonga', cursive;
}

#title {
font-size:72pt;
text-align:center;
}


#decal {
float:left;
width:50%;
float:left;
height:80%;
}

#image {
margin-top:60%;
}

#about {
font-size:24pt;
float:left;
width:50%;
padding-top:5%;
height:80%;
}
4

3 に答える 3

7

@Sourabhは近いです。display:inline-blockただし、代わりにfloat使用vertical-align:bottomして、底を揃えるのに使用する方がよいでしょう。

CSS

* {
    font-family:'Milonga', cursive;
}
#title {
    font-size:72pt;
    text-align:center;
}
#decal {
    font-size:24pt;  /*Add this so that 1em is the same accross the divs*/
    padding-bottom:1em; /*Match the paragraph margin*/
    width:45%;
    display:inline-block;
    height:80%;
    vertical-align:bottom;
}
#image {
    margin-top:60%;
}

img {
    width: 100%
}

#about {
    font-size:24pt;
    display:inline-block;
    width:50%;
    padding-top:5%;
    height:80%;
    vertical-align:bottom;
}

例: http://jsfiddle.net/ajdQa/

于 2013-06-06T06:13:08.707 に答える
1

user2458195は正しい。widthただし、属性を使用する代わりに CSS に幅を追加します。

これをチェックして

全画面表示

CSS

* {
    font-family:'Milonga', cursive;
}
#title {
    font-size:72pt;
    text-align:center;
}
#decal {
    width:45%; /* changed to get some space btween #decal and #about */
    float:left;
    height:80%;
}
#image {
    margin-top:60%;
}

img {
    width: 100% /* 100% of its parent ie, #decal*/
}

#about {
    font-size:24pt;
    float:right; /* right to get some space */
    width:50%;   /* try changing back to left n see what happens */
    padding-top:5%;
    height:80%;
}
于 2013-06-06T05:05:17.583 に答える
0

サイズ変更してもデカールdivに収まるようにimgタグの幅= 100％にし、高さにpxを追加してください

<div id="decal">
    <div id="image">
        <img src="images/tree.png" alt="tree" width="100%" height="900px">
    </div>      
</div>
于 2013-06-06T04:51:26.277 に答える