Question

我使用以下三个div来控制我网站每个页面的布局（8-12页）：

.left, .right{

width:25%;
height:2300px;
float:left;
}   

.left {
clear:both;
}

.middle {
width:50%;
height:2300px;
float:left;
}

这可以成功地将所有HTML保持在水平布局中，除了在一个页面上出现水平滚动条并且我能够滚动到最左边的div之外。我没有隐藏或其他方面的任何元素，超出最左边的div，所以我不确定我应该考虑解决这个问题。

HTML
<div class="left">
<img class="number" id="number5" src="images/number5.jpg" data-number=4 />
<div id="controls">
 <p class="pagechange" id="previous" data=-1><img  src="images/pagebutton_prev.jpg" height="50" width="30" /></p>
   <div id="postbutton">
    <img id="postcomment" src="../mazihealth/My  Images/PostComment_icon.jpg" height="50" width="100"/>
  </div>
 <p class="pagechange" id="next" data=1><img src="images/pagebutton.jpg" height="50" width="30"/></p>
</div>
</div>
<div class="middle">
<div class="filterjq">

<div id="filterjq-show">
  <img class="number" id="number1" src="images/number1.jpg" data-number=0 />
  <ul>
    <li  class="show" id="allposts" data="%">All Posts</li>
    <li  class="show" id="user" data="<?php echo $_SESSION['Userid']; ?>">My Posts</li>
    <li  class="show" id="follow" data="follow">Following</li>
  </ul>
</div>

<div id="filterjq-species">
  <img class="number" id="number2" src="images/number2.jpg" data-number=1 />
    <ul> 
      <li class="species" id="Dog" data="Dog"><img src="../mazihealth/My Images/dog icon.jpeg" /></li>
      <li class="species" id="Cat" data="Cat"><img src="../mazihealth/My Images/cat icon.jpeg" /></li>
      <li class="species" id="allspecies" data="%" ><img src="../mazihealth/My Images/dog_and_cat_icon.jpg" /></li>
      <li class="species" id="breed" data-breed="<?php echo $_SESSION['Breed']; ?>"><img src="../mazihealth/My Images/aussie.jpg" /></li>
    </ul>
</div>

<div id="filterjq-medcond">
  <img class="number" id="number3" src="images/number3.jpg" data-number=2 />
    <ul>
      <li class="medcond" id="allmedcond" data="%">All</li>
      <li class="medcond" id="Arthritis"  data="Arthritis">Arthritis</li>
      <li class="medcond" id="Cancer" data="Cancer">Cancer</li>
      <li class="medcond" id="Cardiac" data="Cardiac Respiratory">Cardiac</li>
      <li class="medcond" id="Diabetes" data="Diabetes">Diabetes</li>
      <li class="medcond" id="Obesity" data="Obesity">Obesity</li>
      <li class="medcond" id="Other" data="Other">Other</li>
    </ul>
</div>
<div class="divider"></div>
</div>


<!--=================this is a dynamic table -->
<table id="table2">
<tr><img class="number" id="number4" src="images/number4.jpg" data-number=3 /></tr>
  <tbody>
    <tr>
        <td class="post"></td>
    </tr>
  </tbody>
</table>
</div>

<div class="right">
  <div id="dialog" title="Forum Tips"></div>
    <p>Now Showing:</p>
    <img id="breedimage" src="" />
    <p id="breedname"><?php echo $_SESSION['Breed']; ?></p><p id="newmedcond"></p>

<!--  another dynamic table -->   
<div id="medcond-count">
<h2> Post Count </h2>
<ul id="tally">
  <li></li>
</ul>

Answer 1

我在这段代码中看不到任何问题，但你可以添加overflow-x:hidden;来禁用水平滚动条。

body{
    overflow-x:hidden;
}

导致水平滚动条出现的原因

1 个答案: