0

それは私が望むところにとどまりません、これを見てください：

<div style="float: left; width: 30%">
 <img src="{avatar}" alt="" />
</div>

<div style="float:right; width: 70%; text-align: left">
 {message}
</div>

<div style="clear:both"></div>

インターネットエクスプローラ：

モジラ ファイアフォックス:

テキストを上部に配置したい (vertical-align: top を試した)、画像を IE の白いボックスに配置したい。

より熟練した誰かが私を助けてくれることを願っています。

ありがとう！問題がわかりません:/

編集：コード全体を追加


* { padding: 0; margin: 0; }

body {
font: 11px Geneva, "Trebuchet MS", Arial, Verdana, sans-serif;
width: 999px;
background: #EFEFEF;
}

#content {
width: 400px;
}

.thread-content {
padding: 5px;
border: 1px solid #CECFCE;
background: #FFF;
}

div.header {
border: 1px solid #CECFCE;
background: #FFF;
margin-bottom: 10px;
}


<div id="content">

<div class="header">{title}</div>
<div class="thread-content">

<div style="float: left; width: 30%; padding: 5px">
 <img src="{avatar}" alt="user avatar" />
</div>

<div style="float: right; width: 70%; text-align: left">
 {message}
</div>

<div style="clear:both"></div>
</div>

</div>
4

5 に答える 5

2

両方のマージンが 0 に設定されていることを確認してください。

<img src="{avatar}" alt=""  style="float: left; width: 30%; margin: 0px"/> 

<div style="float:right; width: 70%; text-align: left; margin: 0px">
 {message}
</div>

<div style="clear:both"></div>

css は非常に扱いにくい場合があるため、他の解決策を試してみてください。

  • 両方とも左にフロートさせても、違いはありません。
  • 境界線がサイズを大きくしないことを確認してください。
  • 1 の幅を少し減らします。IE は頑固です。
于 2009-07-11T14:42:00.390 に答える
0

わかりました。テーブルを使用したために投票されませんでしたか? 私は本業のデザイナーではありません。私は実際にはプログラマーであり、テーブル レイアウトを使用するというアイデアにうんざりしている筋金入りの CSS デザイナーがいることは知っていますが、それは私にとってはうまくいくようです。私が一緒に仕事をしているグラフィック デザイナーは、花火から自動生成されたテーブル レイアウトを使って仕事をしてくれますが、これは本当に大変なことです。

とにかく、私が個人的に望ましい効果を達成しようとする方法は、純粋な css の方がより似ています。

<html>
<head>
    <title>SandBox</title>  
    <style type="text/css">
        #outerDiv
        {
            margin:0;
            background-image:url(myImage.gif);
            background-position:top left;
            background-repeat:no-repeat;
            padding-left:30%;
            min-height:200px;
            background-color:#777777;               
        }
        #innerDiv
        {
            background-color:#333333;
        }
    </style>     
</head>
<body>
    <div id="container" style="width:500px;">
        <div id="outerDiv">
            <div id="innerDiv">content goes here</div>
        </div>
    </div>
</body>

注：私はデザイナーではありません。これもwikiにしました。したがって、投票する場合は、編集するか、少なくともコメントを残してください。

于 2009-07-12T16:42:17.660 に答える
0

私が試してみると、コードは正常に動作します。画像やテキストにパディングや余白がありませんか? それはあなたが使用しているパーセンテージを台無しにするでしょう. 持っている場合は、Firebug で画像とテキストを調べて、どのスタイルが適用されているかを確認してください。

于 2009-07-11T14:56:59.477 に答える
0

width: 30% または width: 70% と言うと、div のパディング、ボーダー、マージンを除いた div 内のコンテンツの幅を意味します。画像を見ると、両方の div にパディングなどが追加されていると確信しています。また、コードに「background: #fff」が表示されないため、どれが「白い」ボックスかわかりません。

于 2009-07-11T15:03:40.853 に答える
0

これは、2 つのフローティング div の (外部) 幅の合計が外部ボックスの内部幅よりも大きく、同じ行に収まらないために発生します。

外部 div の幅を増やしたり、パディングを減らしたり、内部ボックスの幅やマージンやパディングを減らしたりしてみてください。

于 2009-07-11T14:42:55.567 に答える