0

私はそのようなhtmlコードを持っています：

<body style="text-align: center;">
<div style="background-color: #014156; text-align: center; width: 985px; margin:6px auto;">
<div style="background-color: #a6a6a6; width: 975px; background-image:url('shadow.gif'); background-repeat:repeat-x; background-position: center top; margin: 6px; overflow:hidden;">
<div style="float:left; width: 674px; text-align: center; color:#056c02; margin-left: 5px; margin-top: 10px; font-size: 20opx;" title="Product title"><span style="color: #d2ff00">"</span><span style="background-color: #d2ff00">[[Title]]</span><span style="color: #d2ff00">"</span><p style="text-align: left; font-size: 14px; margin-bottom: 5px;" title="Description">[[Description]]</p></div>
<div style="float:left; width: 301px; text-align: center; " title="General information (Image, stock, price)">[[Picture1]]<BR><SPAN style="FONT-SIZE: 9px; background-color: #FFFFFF;">Image is for illustrative purposes only. Please refer to product description.</SPAN></div>
</div>

結果：

ここに画像の説明を入力してください

灰色の背景のdivでは、2つのdivがインラインで整列する必要があり、結果は次のようになります。 ここに画像の説明を入力してください

何を変更すればよいですか、どこに問題がありますか？

いくつかのホストの理由により、これにcssを使用する機能がないため、私のスタイルはタグで記述されています。だから私にそれについて話し始めないでください:)

4

3 に答える 3

1

左の div または右の div の幅を下げる必要があります。

650pxたとえば、最初の div を下げると、問題が解決します。

あなたのロジックは正しかった: 674px + 301px は 975px に等しいが、これらの値のマージンとパディングとボーダーを考慮していませんでした。「実際の」幅を 975px 以下にする

于 2013-02-27T16:14:35.440 に答える
0

inline の横に並んだpタグがあります。要件に応じて、タグにまたはを追加します。別の可能性は、 を に変更することです。blockspaninlineinline-blockppspan

于 2013-02-27T16:15:08.093 に答える
0

の代わりにfloat: left、で試してみてdisplay: inline-blockください。

于 2013-02-27T16:13:51.740 に答える