1

我有包含 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>
4

4 回答 4

2

请试一试，

删除 clear:both; 从 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>
于 2013-04-08T06:16:17.490 回答
1

在此处添加浮动：左侧

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

并删除 clear:both 并添加 float:left

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

在这里查看演示.... http://jsfiddle.net/6e4xN/1/

于 2013-04-08T06:11:50.373 回答
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>

让我知道它是否适合您。

于 2013-04-08T06:41:14.163 回答
1

我猜代码中存在一些问题。您不能对页面中的多个元素使用相同的 ID。其次，当您为 adv_right div 使用百分比宽度时，为什么不对 resultwrapper div 使用相同的宽度，resultwrapper 和 adv_right div 都向左浮动并且没有 clear:both 在 css 中。我觉得这应该可以解决你的问题。

于 2013-04-08T06:58:34.603 回答