2013-04-08 118 views
1

我有PHP程序,其中包含div main_wrapper該div有兩個子div resultwrapper和adv_right。我希望adv_right div完全在resultwrapper div的右側。當我使用float時,表示div存在於main_wrapper div之外。Proplem在div右對齊?

<style> 
.resultwrapper{width:990px; margin: 10px auto 10px auto; clear:both; } 
.resultitem{ float: left; 
    height: 170px; 
    margin-bottom: 0px; 
    margin-left: 10px; 
    min-height: 130px; 
    width:218px;} 
.resultleftitem{padding-left:0;margin-left:0px;} 
.resultitem img{border:dotted 1px #666; padding:6px;} 
.resultitem img:hover{border:solid 1px #F60;} 
.resultitem h4{font-size:12px; font-weight:bold; color:#249ce9; margin-top:5px; } 
.resultitem a{color:#249ce9;} 
.resultitem .caption{color:#9c9c9c; font-size:12px; display:block; margin-top:6px; text-align:justify;} 
</style> 
<div class="main_warpper"> 
<div class="resultwrapper"> 
<?php 
while($row = mysql_fetch_array($rs)) { 
     $id=$row['id']; 
     $type=$row['type']; 
     $location=$row['location']; 
     if(file_exists("properties//". $imageloc ."//thumb.jpg")) 
     { 
      $thumb_img="properties/". $imageloc ."/thumb.jpg"; 
     } else { 

      $thumb_img="images/default.jpg"; 
     } 
     if($cnt==0 || $cnt ==4) $newResult=true; else $newResult=false; 

?> 

<div id="parent" > 
    <div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank"> 
    <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a> 
     <div class="itemdetails"> 
      <h4 id="linkheading"><a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank"><?php echo $type ." @ ".$location; ?></a></h4> 
      <span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span> 

     </div> 
    </div> 
    </div> 

<?php 
    $cnt++; } ?> 
</div> 

<div class="adv_right" style=" clear:both; width:15%; float:right;height:300px; background-color:#999999;"> 
    </div> 
</div> 
+0

main_warpper!= main_wrapper ...你可以使用的jsfiddle或東西可寫可讀的代碼? – Shomz 2013-04-08 06:09:45

+2

http://stackoverflow.com/questions/2716955/css-layout-aligning-two-divs-side-by-side – 2013-04-08 06:10:46

回答

2

請嘗試它,

清除:兩者;來自股利,並設置寬度ü希望什麼,,

請嘗試你想這樣的代碼?

<style> 
.resultwrapper { 
    margin: 10px auto 10px auto; 
} 
.resultitem { 
    float: left; 
    height: 170px; 
    margin-bottom: 0px; 
    margin-left: 10px; 
    min-height: 130px; 
    width:218px; 
} 
.resultleftitem { 
    padding-left:0; 
    margin-left:0px; 
} 
.resultitem img { 
    border:dotted 1px #666; 
    padding:6px; 
} 
.resultitem img:hover { 
    border:solid 1px #F60; 
} 
.resultitem h4 { 
    font-size:12px; 
    font-weight:bold; 
    color:#249ce9; 
    margin-top:5px; 
} 
.resultitem a { 
    color:#249ce9; 
} 
.resultitem .caption { 
    color:#9c9c9c; 
    font-size:12px; 
    display:block; 
    margin-top:6px; 
    text-align:justify; 
} 
</style> 
<div class="main_warpper"> 
    <div class="resultwrapper"> 
    <?php 
while($row = mysql_fetch_array($rs)) { 
     $id=$row['id']; 
     $type=$row['type']; 
     $location=$row['location']; 
     if(file_exists("properties//". $imageloc ."//thumb.jpg")) 
     { 
      $thumb_img="properties/". $imageloc ."/thumb.jpg"; 
     } else { 

      $thumb_img="images/default.jpg"; 
     } 
     if($cnt==0 || $cnt ==4) $newResult=true; else $newResult=false; 

?> 
    <div id="parent" > 
     <div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank"> <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a> 
     <div class="itemdetails"> 
      <h4 id="linkheading"><a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank"><?php echo $type ." @ ".$location; ?></a></h4> 
      <span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span> </div> 
     </div> 
    </div> 
    <?php 
    $cnt++; } ?> 
    </div> 
    <div class="adv_right" style="width:15%; float:right;height:300px; background-color:#999999;">23123 </div> 
</div> 
1

加浮動:這裏留下了

 <div class="resultwrapper" style="float:left;"> 

和rempove明確:雙方並添加浮動:左

 <div class="adv_right" style=" clear:both; width:15%; float:left;height:300px; 
           background-color:#999999;"> 

看到演示這裏.... http://jsfiddle.net/6e4xN/1/

+0

我也嘗試,但它的回報同樣的問題。 – nagaking 2013-04-08 06:14:49

1

當你要使用此代碼也不會超過7-8元的工作,當你有更多的元素,然後在下面的樣式表來變通。

<style> 
.resultwrapper { 
    margin: 10px auto 10px auto; 
    width:80%; 
    float:left; 
} 
.resultitem { 
    float: left; 
    height: 170px; 
    margin-bottom: 0px; 
    margin-left: 10px; 
    min-height: 130px; 
    width:150px; 
} 
.resultleftitem { 
    padding-left:0; 
    margin-left:0px; 
} 
.resultitem img { 
    border:dotted 1px #666; 
    padding:6px; 
} 
.resultitem img:hover { 
    border:solid 1px #F60; 
} 
.resultitem h4 { 
    font-size:12px; 
    font-weight:bold; 
    color:#249ce9; 
    margin-top:5px; 
} 
.resultitem a { 
    color:#249ce9; 
} 
.resultitem .caption { 
    color:#9c9c9c; 
    font-size:12px; 
    display:block; 
    margin-top:6px; 
    text-align:justify; 
} 
</style> 

讓我知道它是否適用於您。

1

我想有一個代碼中的一些問題。您不能在頁面中爲多個元素使用相同的ID。其次,當您使用百分比寬度爲adv_right DIV,你爲什麼不使用相同的同時與resultwrapper & adv_right的div resultwrapper格向左浮動,並沒有明確的:無論是在CSS。我覺得這應該可以解決你的問題。