Question

我有包含div main_wrapper的php程序，div有两个sub div resultwrapper和adv_right。我想adv_right div恰好是resultwrapper div的右侧。当我使用float意味着div存在于main_wrapper 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>

Answer 1

请试一试，

删除清除：两者;从你想要的div和设定宽度，

请尝试这样的代码吗？

    <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>

Answer 2

添加浮动：离开这里

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

并且清除：两者并添加float：left

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

在此处查看演示.... http://jsfiddle.net/6e4xN/1/

Answer 3

当你打算使用这个代码时，如果有更多的元素，那么当它使用下面的样式表时，它将无法使用超过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>

让我知道它是否适合你。

Answer 4

我猜代码中存在一些问题。您不能对页面中的多个元素使用相同的ID。其次，当您使用adv_right div的百分比宽度时，为什么不对resultwrapper div使用相同的结果包装器＆amp; adv_right divs向左浮动，没有明确：两者都在css中。我觉得这应该可以解决你的问题。

div中的问题是否正确对齐？

4 个答案: