0

テキストが増えたときにメインのdivの下にある他のdivをテキストで下に移動するのに困っています.cssで何度も試しました. 多くの入力を押してテキストが増加すると、テキスト div の高さが増加しますが、他のダイブは移動しません。私の英語について申し訳ありません。これには何ができますか？

これはテキストを挿入する前です http://i.stack.imgur.com/SeY8Y.png

これはテキストを挿入した後です http://i.stack.imgur.com/k5Ik6.png

これは私のコードです

    <div style="width:795px; min-height:40px; background-color:#0099FF; position:absolute; left: 60px; top: 0px;padding-top:10px;padding-left:5px; color:#FFF;font-size:14px"></div>
<span style="width:795px; min-height:40px; background-color:#0099FF; position:absolute; left: 60px; top: 0px;padding-top:10px;padding-left:5px; color:#FFF;font-size:14px"><strong>Tomorrow can be too late..</strong></span>
<div style="width:100px; height:30px; background-color:#FBC81A; position:absolute; left: 757px; top: 40px; border-bottom-left-radius:5px;z-index:1;">
  <div style="width:50px;height:30px; position:absolute; padding-top:3px;padding-left:13px;">
    <input type="submit" name="btn_report" id="btn_report" value="" style="background-image:url(images/report.png);background-repeat:no-repeat;width:23px;height:23px;border:none;background-color:#FBC81A;cursor:pointer;" title="Report this post" />
  </div>
<div style="width:50px; height:30px; position:absolute; left: 50px; background-color:#0C0; top: 0px;text-align:center;">
<div style="margin-top:7px;color:#FFF;font-weight:bold;cursor:pointer;" title="Post reputations">102</div>

</div></div>
  <div style="width:795px; min-height:340px; background-color:#F3F8F8; position:absolute ; left: 59px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; top: 40px;  border-left:3px #0099FF solid;border-right:3px #0099FF solid;" >
    <p>sds</p>
    <p>d</p>
    <p>sa</p>
    <p>d</p>
    <p>sad</p>
    <p>s</p>
    <p>&nbsp;</p>
    <p>ds</p>
    <p>ad</p>
    <p>s</p>
    <p>&nbsp;</p>
    <p>d</p>
    <p>dsa</p>
    <p>das</p>
    <p>d</p>
    <p>sa</p>
    <p>d</p>
    <p>as</p>
    <p>das</p>
    <p>d</p>
    <p>as</p>
    <p>das</p>
    <p>d</p>
    <p>sa</p>
    <p>d</p>
  </div>
  <div style="width:800px; min-height:25px; background-color:#0099FF; position:absolute; left: 60px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; top: 355px;" ></div>
   <div style="width:798px; min-height:20px;  position:absolute; left: 62px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; top: 380px;background-image:url(shadow_9.png);background-repeat:no-repeat;"  ></div>
</div>
4

2 に答える 2

2

position: absolute、 、left: 60pxのせいですtop: 355px。このようにして、コンテナーは常に画面上の同じ位置に表示されます。との代わりにposition: relativeを使用する必要があります。また、div が正しくネストされていません。marginleftright

http://jsfiddle.net/skeurentjes/2xd88/1/をご覧ください

それはあなたが望むように機能すると思います。

于 2012-10-24T13:22:59.057 に答える
0

ボトムバーを移動するだけ<div>です:

<div style="width:800px; min-height:25px; background-color:#0099FF; position:absolute; left: 60px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; top: 355px;" ></div>

<div>テキストを配置する場所（<p>タグの下）内で、次のように変更します。

<div style="width:800px; min-height:25px; background-color:#0099FF; position:relative; left: 0px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; bottom: 0px;" ></div>

テキストの内容に合わせて動的に移動します<div>

于 2012-10-24T13:18:52.283 に答える