html和css区别 - html引入css




HTML/CSS中整个div的href链接 (6)

UPDATE 06/10/2014:在HTML5中,使用div内部的a在语义上是正确的。

您需要在以下方案中进行选择:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

这在语义上是不正确的,但它会起作用。

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

这在语义上是正确的,但涉及使用JS。

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

这在语义上是正确的,并按预期工作,但不再是div。

这是我想要在HTML / CSS中完成的:

我有不同高度和宽度的图像,但它们都在180x235以下。 所以我想要做的是创建一个带bordervertical-align: middlediv vertical-align: middle它们全部放在vertical-align: middle 。 我已经成功地做到了,但现在我被困在如何正确链接整个div的href链接上。

这是我的代码:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

请注意,为了便于复制粘贴,样式代码是内联的。

我读了一些地方,我可以简单地添加另一个父div在代码的顶部,然后在里面做一个href。 但是,根据一些研究,它不会是有效的代码。

所以总结一遍,我需要整个div( #parentdivimage )作为href链接。


为什么不去掉<div>元素并用<a>代替呢? 只是因为锚标记不是div,并不意味着你不能用display:block ,高度,宽度,背景,边框等来设置它。你可以使它看起来像一个div,但仍然像一个链接。 然后,您不会依赖无效的代码或JavaScript,而这些代码或JavaScript可能无法为某些用户启用。


像这样做:

Parentdivimage应该有指定的宽度和高度,其位置应该是:

position: relative;

就在parentdivimage里面,父母包含的其他div旁边应该放置:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

然后在css文件中:

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

由于高度和宽度设置为100%,span标签将填写其parentdiv的父块。 由于将z-index设置为高于其他元素,跨度将位于所有周围元素的顶部。 最后,跨度将是可点击的,因为它位于'a'标签内。


display:block放在锚元素上。 和/或zoom:1 ;

但你应该真的这样做。

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

改为将id="childdivimag"div作为span ,并将其包裹在a元素中。 由于默认情况下spanimgimg元素,所以这仍然有效,而div是块级元素,因此当包含在a时,标记是无效a


根据超现实主义梦想的说法,最好根据我的经验来设计锚标签,但这确实取决于你在做什么。 这是一个例子:

HTML:

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

然后CSS:

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output





css