Question

我看了一遍，似乎无法找到答案。我在div类中有链接浮动。我有2个div漂浮一个左边一个右边。我知道我已经阅读了一些关于链接是100％宽度掩盖事物，但似乎无法让它工作。在JC div的链接从9-15将工作链接从1-8将不加在他div .heading1Text链接不起作用。可以使链接具有特定的颜色和大小，但这就是全部。

这是我的HTML文件：

<div id="wrapper">

<div id="header">

     <div class="logo">
             <a href="http://badboyzbailbondsks.com/index.html" title="Return to the Home Page">
              <img src="images/bad-boyz-bail-bonds-topeka-ks-header.png" width="100%">

              <div class="call">Call Now</div>
              <div class="days">24hrs / 7 Days A Week</div>
              <div class="number">785-640-7383</div>
              <div class="town">Topeka, KS</div>
              </a>
     </div>


     <div id="nav">
           <li class="home"><a href="index.html">Home</a></li>
           <li class="help"><a href="help.html">How Can We Help</a></li>
           <li class="faq"><a href="faq.html">FAQ's</a></li>
           <li class="resource"><a href="resource.html">Resources</a></li>
           <li class="forms"><a href="forms.html">Forms</a></li>
           <li class="tests"><a href="testimonials.html">Testimonials</a></li>
           <li class="contact"><a href="index.html">Contact Us</a></li>

    </div> 

</div>

<div id="content">

      <div class="info">           
        <div class="heading1">Judicial Courts</div><br />
                <div class="heading1Text">Here is a list of the Judicial Court Offices with address' and phones numbers to each Court office. For Municipal Court Address' Click this link - <a href ="municipal.html">MUNICIPAL COURTS</a>. If you need directions to the Court address, please click get directions below the court your looking for. For links to the forms to fill out to help the process of getting your loved one out as fast as possible see links on right side or <a href="forms.html">GO HERE</a>.
                </div>

    </div>    

                <br /><br />
        <div class="court">          
                <div class="courtsType">Judicial Courts</div>

                <br /><br />

                <div class="jc1">
                      <div class="courts">Atchison County</div>
                        <li>425 N. 5th St., Atchison, KS 66002</li>
                        <li>Phone: 913-367-7400</li>
                        <li>Fax: 913-367-1171</li>
                        <li class="directions"><a href="municipal.html">Directions</a></li>
                </div>        
               <div class="jc2">
                      <div class="courts">Coffey County</div>
                        <li>110 S. 6th St. Ste 102, Burlington, KS 66839</li>
                        <li>Phone: 620-364-8628</li>
                        <li>Fax: 620-364-8535</li>
                        <li class="directions">Directions</li>
               </div>
               <br />
              <div class="jc3">
                      <div class="courts">Dickinson County</div>
                        <li>109 E. 1st St., Abilene, KS 67410</li>
                        <li>Phone: 785-263-3142</li>
                        <li>Fax: 785-263-4407</li>
                        <li class="directions">Directions</li>
              </div>
              <div class="jc4">
                      <div class="courts">Douglas County</div>
                        <li>111 E. 11th St., Lawrence, KS 66024</li>
                        <li>Phone: 785-832-5256</li>
                        <li>Fax: 785-832-5174</li>
                        <li class="directions">Directions</li>
               </div>
               <br />
               <div class="jc5">
                      <div class="courts">Franklin County</div>
                        <li>301 S. Main St., Ottawa, KS 66067</li>
                        <li>Phone: 785-242-6000</li>
                        <li>Fax: 785-242-5970</li>
                        <li class="directions">Directions</li>
                </div>        
               <div class="jc6">
                      <div class="courts">Geary County</div>
                        <li>138 E. 8th St., Junction City, KS 66441</li>
                        <li>Phone: 785-762-5221</li>
                        <li>Fax: 785-762-4420</li>
                        <li class="directions">Directions</li>
               </div>
               <br />
              <div class="jc7">
                      <div class="courts">Jackson County</div>
                        <li>400 New York St., Holton, KS 66436</li>
                        <li>Phone: 785-364-2191</li>
                        <li>Fax: 785-364-3804</li>
                        <li class="directions">Directions</li>
              </div>
              <div class="jc8">
                      <div class="courts">Jefferson County</div>
                        <li>300 Jefferson St., Oskaloosa, KS 66066</li>
                        <li>Phone: 785-863-2461</li>
                        <li>Fax: 785-863-2369</li>
                        <li class="directions">Directions</li>
               </div>
               <br />
              <div class="jc9">
                      <div class="courts">Lyon County</div>
                        <li>430 Commercial St. Emporia, KS 66801</li>
                        <li>Phone: 913-367-7400</li>
                        <li>Fax: 620-341-3497</li>
                        <li class="directions"><a href="municipal.html">Directions</a>        </li>
              </div>
              <div class="jc10">
                      <div class="courts">Miami County</div>
                        <li>120 S. Pearl St., Paola, KS 66071</li>
                        <li>Phone: 913-294-3326</li>
                        <li>Fax: 913-294-2535</li>
                        <li class="directions">Directions</li>
              </div>
              <br />
              <div class="jc11">
                      <div class="courts">Osage County</div>
                        <li>717 Topeka Ave., Lyndon, KS 66451</li>
                        <li>Phone: 785-828-4514</li>
                        <li>Fax: 785-828-4704</li>
                        <li class="directions">Directions</li>
               </div>
              <div class="jc12">
                      <div class="courts">Pottawatomie County</div>
                        <li>106 Main St., Westmoreland, KS 66549</li>
                        <li>Phone: 785-457-3392</li>
                        <li>Fax: 785-457-2107</li>
                        <li class="directions">Directions</li>
              </div>
              <br/>
              <div class="jc13">
                      <div class="courts">Riley County</div>
                        <li>100 Courthouse Plaza, Manhattan, KS 66505</li>
                        <li>Phone: 785-537-6364</li>
                        <li>Fax: 785-537-6328</li>
                        <li class="directions">Directions</li> 
               </div>
              <div class="jc14">
                      <div class="courts">Shawnee County</div>
                        <li>200 SE 7th St., Topeka, KS 66603</li>
                        <li>Phone: 785-233-8200</li>
                        <li>Fax: 785-291-4908</li>
                        <li class="directions">Directions</li>
              </div>
              <br />
              <div class="jc15">
                      <div class="courts">Wabaunsee County</div>
                        <li>215 Kansas St., Alma, KS 66401</li>
                        <li>Phone: 785-765-2406</li>
                        <li>Fax: 785-765-2487</li>
                        <li class="directions">Directions</li>
              </div>

              <br /><br />

       </div>

             <br /><br /><br /><br /><br />

      <div class="disclaimer">
          <div class="dis"><b><u>Disclaimer:</u></b><div class="disText">Bad Boyz Bail Bonds is not responsible for the courts decision on bail eligibility, bail amounts or any other legal issues concerning the defendants charges or case.</div></div> 
      </div> 

     <div id="rtCol">
          <div id="homeImg"><img src="images/court.png" width="100%"></div>
          <div id="homeInfo"><img src="images/info.png" width="100%"></div> 
          <div id="formList"><img src="info.png" width="100%">
                 <div class="fill"><b><u>Fill Out Your Forms In Advance</u></b></div>
                 <div class="before">Before Court Begins</div>
                 <div class="promise">Promissory Note</div>
                 <div class=""></div>
                 <div class=""></div>
                 <div class=""></div>
         </div>  
         <div id="muni">For Municipal Court Address' Click this link - <a href="municipal.html">MUNICIPAL COURTS</a></div>      
     </div>

  </div>



     <div id="footer">

          <div class="footerImg">
               <img src="images/footerImg.png" width="100%">
          </div>

       <ul id="btmNav">
           <li class="btmHome"><a href="index.html">Home</a></li>
           <li class="btmHelp"><a href="help.html">How Can We Help</a></li>
           <li class="btmFaq"><a href="faq.html">FAQ's</a></li>
           <li class="btmResource"><a href="resource.html">Resources</a></li>
           <li class="btmForms"><a href="forms.html">Forms</a></li>
           <li class="btmTests"><a href="testimonials.html">Testimonials</a></li>
           <li class="btmContact"><a href="index.html">Contact Us</a></li>

      </ul>

      <div id="visa"><img src="images/visa.png" width="60%"></div>
      <div id="mc"><img src="images/mc.png" width="60%"></div>
      <div id="discover"><img src="images/discover.png" width="60%"></div>
      <div id="cash"><img src="images/cash.png" width="60%"></div>



      <div class="copy">&copy;BadBoyzBailBondsKS.com - 2014</div> 

      <div class="by">Design By Benwa Designs</div> 



   </div>

CSS文件：

 #wrapper
{
max-width:970px;
padding-top:1%;
margin:auto;
}

#header
{
max-width:970px;
margin:auto;
background-color:rgba(0,0,0,1);
}

.logo
{
position:relative;
}

.call
{
position:absolute;
top:6%;
right:4%;
color:rgb(255,0,0);
font-size:2em;
text-decoration:underline;
text-align:center;
width:19%
 }

 .days
 {
position:absolute;
top:36%;
right:0.5%;
color:rgb(255,255,255);
font-size:1em;
text-align:center;
width:26%;
 }

.number
{
position:absolute;
top:53%;
right:1%;
color:rgb(255,255,255);
font-size:2em;
width:25%;
text-align:center;
}

.town
{
position:absolute;
top:79%;
right:6%;
color:rgb(255,255,255);
font-size:1em;
width:15%;
text-align:center;
}

#nav
{
list-style:none;
width:100%;
margin:auto;
padding:0;
line-height:26px;
background-color: rgb(51,0,255);
text-align:center;
border-top: 1px solid rgba(255,0,0,1);
border-bottom: 1px solid rgb(255,0,0);
}

#nav li
{
display:inline-block;
font-size:18px;
color:rgb(255,255,255);
padding:0px 10px;
}

#nav li:hover
{
height:26px;
background-color:rgb(255,0,0);
}

#nav li a
{
text-decoration:none;
color:rgba(255,255,255,1);
}

#content
{
position:relative;
max-width:970px;
background-color:rgba(0,0,0,1);
margin:auto;
}

.info
{
width:65%;
}

#rtCol
{
position:absolute;
float:right;
width:100%;
top:2%;
right:1.5%;
}
#homeImg
{
width:25%;
float:right;
clear:right;
padding-bottom:1%;
}

#homeInfo
{
width:25%;
float:right;
clear:right;
padding-bottom:1%;
}

 #formList
{
position:relative;
width:25%;
float:right;
clear:right;
padding-bottom:2%;
}

.fill
{
position:absolute;
right:5.9%;
color:rgba(51,19,255,1);
font-size:16px;
top:4%;
padding:0 1px 0 1px;
 }

 .before
 {
position:absolute;
right:45%;
color:rgba(51,19,255,1);
font-size:16px;
top:15%;
padding:0 1px 0 1px;
}

.promise
{
position:absolute;
right:53%;
color:rgba(51,19,255,1);
font-size:16px;
top:25%;
padding:0 1px 0 1px;
}

 #muni
 {
position:relative;
font-size:18px;
color:rgba(255,255,255,1);
text-align:center;
float:right;
clear:right;
width:25%;
 }

 #muni a
 {
text-decoration:none;
color:rgba(255,0,0,1);
}

#muni a:hover
{
text-decoration:underline;
color:rgba(255,0,0,1);
}

.heading1
{
padding-top:55px;
padding-left:20px;
font-size:32px;
color:rgba(255,0,0,1);
}

.heading1Text
{
font-size:16px;
color:rgb(255,255,255);
padding-left:20px;
}

.directions a
{
text-decoration:none;
color:rgba(255,255,0,1);
}

.directions a:hover
{
text-decoration:underline;
color:rgba(255,0,0,1);
}

.court
 {
 width:65%
 }

.courtsType
{
font-size:22px;
color:rgba(255,0,0,1);
text-decoration:underline;
text-align:center;
}

.courts
{
font-size:16px;
color:rgba(255,255,255,1);
text-decoration:underline;
padding-bottom:5px;
}
.directions
{
color:rgba(255,0,0,0.8);
}

.jc1
{
list-style:none;
color:rgba(0,255,0,1);
float:left !important;
padding:0px 50px 0px 30px;
text-align:center;
width:32%;
}

.jc2
{
list-style:none;
color:rgba(0,255,0,1);
text-align:center;
}

.jc3
{
list-style:none;
color:rgba(0,255,0,1);
float:left !important;
padding:0px 50px 0px 30px;
text-align:center;
}

.jc4
{
list-style:none;
color:rgba(0,255,0,1);
text-align:center;
}

.jc5
{
list-style:none;
color:rgba(0,255,0,1);
float:left !important;
padding:0px 50px 0px 30px;
text-align:center;
}

.jc6
{
list-style:none;
color:rgba(0,255,0,1);
text-align:center;
}

.jc7
{
list-style:none;
color:rgba(0,255,0,1);
float:left !important;
padding:0px 50px 0px 30px;
text-align:center;
}

.jc8
{
list-style:none;
color:rgba(0,255,0,1);
text-align:center;
}

.jc9
{
list-style:none;
color:rgba(0,255,0,1);
float:left !important;
padding:0px 50px 0px 30px;
text-align:center;
}

.jc10
{
list-style:none;
color:rgba(0,255,0,1);
text-align:center;
}

.jc11
{
list-style:none;
color:rgba(0,255,0,1);
float:left !important;
padding:0px 50px 0px 30px;
text-align:center;
}

.jc12
{
list-style:none;
color:rgba(0,255,0,1);
text-align:center;
}

.jc13
{
list-style:none;
color:rgba(0,255,0,1);
float:left !important;
padding:0px 50px 0px 30px;
text-align:center;
}

.jc14
{
list-style:none;
color:rgba(0,255,0,1);
text-align:center;
}

.jc15
{
list-style:none;
color:rgba(0,255,0,1);
float:left !important;
padding:0px 50px 0px 30px;
text-align:center;
}

.dis
{
font-size:14px;
color:rgb(255,255,255);
margin:auto;
padding:0;
text-align:center;
float:none;
}

.disText
{
font-size:13px;
}

#footer
{
position:relative;
max-width:970px;
margin:auto;
}

.footerImg
{
position:relative;
}

#btmNav
{
position:absolute;
top:5%;
list-style:none;
width:63%;
left:18.5%;
margin:auto;
padding:0;
text-align:center;
}

#btmNav li
{
display:inline-block;
font-size:16px;
color:rgb(255,255,255);
padding:0px 10px;
}

#btmNav li a
{
text-decoration:none;
color:rgba(255,255,255,1);
}

#btmNav li a:hover
{
color:rgb(255,255,255);
text-decoration:underline;
}

#visa
{
position:absolute;
left:1%;
top:5.5%;
width:5%;
text-align:center;
}

#mc
{
position:absolute;
left:8%;
top:5.5%;
width:5%;
text-align:center;
}

#discover
{
position:absolute;
right:8%;
top:5.5%;
width:5%;
text-align:center;
}

#cash
{
position:absolute;
right:1%;
top:5.5%;
width:5%;
text-align:center;
 }

.by
{
position:absolute;
color:rgba(255,255,255,1);
font-size:10px;
text-align:center;
right:1%;
width:14%;
bottom:10%;
 }

.copy
{
position:absolute;
font-size:14px;
color:rgb(255,255,255);
text-align:center;
bottom:10%;
left:37.3%;
width:25%;
}

Answer 1

对于div中包含.heading1Text类的锚元素，它们被div覆盖，ID为“rtCol”，因此点击不会发生在锚标签它发生在rtCol div上，我没有在li的jc2，jc3，jc4等中看到任何锚标签。将以下代码放在您的html页面上，以获取有关您实际点击的位置的信息

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script>
$(document).ready(function(){
    $("body").click(function(event){console.log("clicked on >>");console.log(event.target)});
});
</script>

从您的评论我可以建议将 rtCol 的宽度更改为 250px 和 homeImg，homeInfo，formList，muni 的宽度到100％

链接不在Floated div中工作

1 个答案: