مشکل با نحوه تغییر height و انتخاب position در div ها [بایگانی]

alismith

پنج شنبه 21 دی 1391, 12:42 عصر

سلام

من دارم رو استایل کامنت سایتم کار می کنم ولی با 1مشکل مواجه شدم

کد و 1عکس از مشکل به وجود اومده میذارم تا راحتر متوجه منظورم بشید

این css کامل کامنت من هستش :

.comment{ width: 600px; }
.cmntHeader{ width: 600px; background: #181818; height: 40px; font-family: arial; font-size: 18px; color: #999; text-align: left; line-height: 40px; }
.cmntBody{ width: 600px; background: #222222; height: auto; }
.comment div.field{ width: 302px; float: left; height: 150px; }
.comment div.emoticon{ width: 186px; float: left; height: 140px; background: #222; border: 1px solid #111; margin-left: 20px; border-radius: 5px; }
.cmntList{ width: 600px; min-height: 127px; margin-bottom: 30px; height: auto; }

.cmnt{ width: 570px; margin-top: 10px; margin-bottom: 10px; float: right; margin-right: 15px; clear:both; }
.cmnt .body{ width: 570px; background: #333333; min-height: 90px; }
.cmnt .text{ width: 513px; float: left; font-family: arial; color: #FFF; }
.cmnt .arrow{ width: 570px; height: 7px; background: url(../img/comment_arr.jpg) no-repeat 17px top; }
.cmnt .info{ width: 470px; height: 20px; font-family: arial; font-size: 14px; color: #FFF; float: left; text-align: left; }

.reply{ width: 560px; margin-top: 10px; margin-bottom: 10px; float: right; margin-right: 15px; clear:both; }
.reply .body{ width: 560px; background: #333333; min-height: 90px; height: auto; }
.reply .text{ width: 503px; float: left; font-family: arial; color: #FFF; }
.reply .arrow{ width: 560px; height: 7px; background: url(../img/comment_arr.jpg) no-repeat 17px top; }
.reply .info{ width: 460px; height: 20px; font-family: arial; font-size: 14px; color: #FFF; float: left; text-align: left; }

img.avatar{ width: 48px; height: 48px; float: left; margin-top: 20px; }
div.rp{ width: 80px; height: 20px; float: left; text-align: right; }

img.emoticon{ cursor: pointer; }

اینم html مربوط به comment :

<div class="comment">
<div class="cmntHeader">Comments</div>
<div class="cmntBody">
<center>
<br/>

<div class="cmnt">
<a name="comment-id" />
<div class="body">
<div class="text">
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
</div>
<img class="avatar" src="assets/img/cmnt-u.jpg" align="absmiddle" />
</div>
<div class="arrow"></div>
<div class="info">
  Ali (date)
</div>
<div class="rp">
<a href="#comment">reply ↓</a>
</div>
</div>

<div class="reply">
<a name="comment-id" />
<div class="body">
<div class="text">
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
</div>
<img class="avatar" src="assets/img/cmnt-u.jpg" align="absmiddle" />
</div>
<div class="arrow"></div>
<div class="info">
  ahmad (date) | @ali
</div>
<div class="rp">
<a href="#">reply ↓</a>
</div>
</div>

</center>

...

</div>
</div>

مشکل من دقیقا با بخش مربوط به cmnt و reply هستش :

از cmnt. مثال میزنم که زودتر مشکل اصلی روشن بشه (همین مشکل در reply. هم وجود داره)

.cmnt{ width: 570px; margin-top: 10px; margin-bottom: 10px; float: right; margin-right: 15px; clear:both; }
.cmnt .body{ width: 570px; background: #333333; min-height: 90px; }
.cmnt .text{ width: 513px; float: left; font-family: arial; color: #FFF; }
.cmnt .arrow{ width: 570px; height: 7px; background: url(../img/comment_arr.jpg) no-repeat 17px top; }
.cmnt .info{ width: 470px; height: 20px; font-family: arial; font-size: 14px; color: #FFF; float: left; text-align: left; }

<div class="cmnt">
<a name="comment-id" />
<div class="body">
<div class="text">
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
</div>
<img class="avatar" src="assets/img/cmnt-u.jpg" align="absmiddle" />
</div>
<div class="arrow"></div>
<div class="info">
  Ali (date)
</div>
<div class="rp">
<a href="#comment">reply ↓</a>
</div>
</div>

مطابق با source و تصویری که در زیر میبینید، مشکل با تغییر نکردن height در div.body هستش

http://uploadkon.ir/uploads/cmnt.jpg

امیدوارم دوستان بتونن من رو راهنمایی کنن

با تشکر