0

次の 3 つの div を使用して、Web サイトの各ページ (8 ～ 12 ページ) のレイアウトを制御します。

.left, .right{

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

.left {
clear:both;
}

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

これは、水平スクロールバーが表示され、左端の div を超えてスクロールできる 1 つのページを除いて、すべての HTML を水平レイアウト内に維持するために正常に機能します。左端の 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>

4

1 に答える 1

3

このコードに問題は見られませんが、追加overflow-x:hidden;して水平スクロール バーを無効にすることができます。

body{
    overflow-x:hidden;
}
于 2013-10-12T05:32:33.413 に答える