Question

我不能为我的生活弄清楚为什么浮动：我没有正确显示超链接。我最初认为它不是正确的z-index，但现在我只是感到困惑。是否有某个阻止它的地方？

网站地址为www.oakland-rotary.org 我指的是网站右上方的紫色垂直区块，以“您被邀请参加主赛事......”开头。应该是超链接的文本是“点击这里获取信息和票据”

以下是整个块区域的HTML代码：

            <div id="leftcall" style="float:left;width:800px;">
            </div>
            <div id="rightcallout">

            <div style="margin-left:auto;margin-right:auto;padding-bottom:10px;"><img src="/images/smallrotarylogo.png"></div>
            YOU ARE INVITED TO<br>
            <span style="font-size:34px;color:#f3d825;">THE MAIN EVENT</span><br>
            <br>
            <span style="font-family:arial;font-size:12px;">[ OUR ANNUAL FUNDRAISER ]</span><br>
            <span style="font-size:28px;color:#f3d825;">A MARDI GRAS PAR-TAY</span><br>
            AT ROCKWELL WINERY<br>
            IN ALAMEDA, CA<br>
            <br>
            <span style="font-family:arial;font-size:14px">March 1 from 6pm-10pm</span><BR>
            <BR>
            <span style="font-family:arial;font-size:14px;">
            <a href="http://www.eventbrite.com/e/a-mardi-gras-par-tay-oakland-rotary-3-rockwall-winery-march-1-2014-tickets-5268578460" target="_blank">CLICK HERE FOR INFO & TICKETS</a>
            </span>
            <br>                
            </div>
            </div>
        </div>
    </div>

这是该领域的CSS：

#rightcallout {
float:right;
display:block;
z-index:9999;
height:100%;
width:200px;
padding:25px;
color:#fff;
font-family:League Gothic;
font-size:24px;
text-align:center;
background: #552baa; /* Old browsers */
background: -moz-linear-gradient(top,  #552baa 0%, #5c2cb4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#552baa), color-stop(100%,#5c2cb4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #552baa 0%,#5c2cb4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#552baa', endColorstr='#5c2cb4',GradientType=0 ); /* IE6-9 */
border-left:1px dashed #fff;
}

任何帮助将不胜感激！非常感谢你!!!

Answer 1

这一刻#rightcallout高度比可用空间大。我已将字体大小更改为自动...并且内容正确匹配。

#rightcallout {
float:right;
display:block;
z-index:9999;
height:100%;
width:200px;
padding:25px;
color:#fff;
font-family:League Gothic;
font-size:auto;  /* <<<-------- Modified*/
text-align:center;
background: #552baa; /* Old browsers */
background: -moz-linear-gradient(top,  #552baa 0%, #5c2cb4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#552baa), color-stop(100%,#5c2cb4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #552baa 0%,#5c2cb4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#552baa', endColorstr='#5c2cb4',GradientType=0 ); /* IE6-9 */
border-left:1px dashed #fff;
}

对于那个链接我做了这个：

<span style="font-family:arial;font-size:14px;position: relative;z-index: 9999;">
<a href="http://www.eventbrite.com/e/a-mardi-gras-par-tay-oakland-rotary-3-rockwall-winery-march-1-2014-tickets-5268578460" target="_blank">CLICK HERE FOR INFO &amp; TICKETS</a></span>

我已在Chrome中测试过并且工作正常...希望这可以帮助您。

为什么我的<a href=""> link not working inside this floating <div>?</div></a>

1 个答案: