0

私は2つを別のものに並べたい（私は3つ持っている）これは私のコードです：

<div class=Mheader >
<div class=theader>
Meine Route !
</div>
<div class=imgcss>
 <img src="Images/Route1.png" width=600 height=100 />
</div>

しかし、画像は常にテキストの下に表示されます。この問題を解決するにはどうすればよいですか? 私のCSSは：

.Mheader
{
    font-family: 'Trebuchet MS';
    font-size: larger;
    font-weight: bold;
    font-style: italic;
    text-transform: capitalize;
    color: #FFFFFF;
    background-color: #008800;
    width: auto;
    height: 100px;
}
.theader
{
    font-family: 'Franklin Gothic Demi';
    font-size: xx-large;
    font-weight: bold;
    font-style: italic;
    line-height: normal;
    width: 250px;
    text-align: left;
    height: 100px;
}
.imgcss
{
    text-align: right;
    width: 600px;
}
4

4 に答える 4

2

クラスで使用する必要float:left;が.theaderあり ます.imgcss

于 2012-06-14T10:10:11.343 に答える
1

彼らに与えるfloat。次のように書きます。

.imgcss,
.theader{
 float:left;
}
于 2012-06-14T10:10:19.473 に答える
1

float: left両方 .theaderと要素だけ.imgcssで、親要素が少なくとも850px大きいことを確認してください（600px + 250px）

.imgcss, .theader{
    ...
    float    : left;
}

.Mheader {
    ...
    min-width : 850px;
}
于 2012-06-14T10:10:46.973 に答える
1

緑のヘッダーを画面全体に表示し、画像/ロゴをこのヘッダー内の右側に配置する必要があると想定しています。これを達成するには:

  1. を閉じます.Mheader。行方不明者と </div>
  2. float: left.theaderに追加します。キープwidth: auto
  3. float: right.imgcssに追加

ここでデモを参照してください。

http://jsfiddle.net/mtbwD/

于 2012-06-14T10:17:23.493 に答える