Question

我有一个简短的标记，我正在制作可点击的框。我想要一个完整的盒子可以点击，所以我做的是将我的盒子元素（div等）放在锚标签内。尽管链接以这种方式工作，但锚标记不会占据其内部的任何高度（显示高度为0px）。这是小提琴http://jsfiddle.net/Pb4PL/1/以及标记的外观：

<body>
    <div class="project-box">
        <a href="#" class="project-link">
            <div class="project-picture-container">
                <img src="sample.jpg" alt="project image">
            </div>
            <div class="project-desc-container">
                <div class="project-heading-container">
                    <h2 class="project-heading">
                    Project Name
                    </h2>
                </div>
                <h3 class="project-desc-heading">
                    This is the description about the project.
                </h3>
            </div>
            <div class="project-desc"
        </a>
    </div>
</body>

为什么不锚定其内容的高度？另外，这里作为div元素的锚标记的父级似乎也没有占据其中内容的任何高度。如何纠正？

Answer 1

您的HTML和CSS代码无效，但我使用它，这是有效的解决方案，我认为没问题。

CSS：

从链接元素中删除位置并向其添加显示块。

img {
    padding: 2px;
    border: 2px solid grey;
}

img:hover { border: 2px solid blue }

.project-box {
    width: 190px;
    position: relative;
}

a {
    text-decoration:none;
    color:#000;
    border:1px solid yellow;
    display: block;
}

.project-picture-container {
    width: 100%;
    height: 150px;
}

.project-heading { font-size: 0.8em }

.project-heading-container {
    height: 15px;
    margin: 8px 0 4px 0;
    padding: 0 2px 0 2px;
}

.project-desc-heading {
    height: 60px;
    padding: 0 2px 0 2px;
    border: 1px solid red;
    font-size: 0.7em;
}

HTML：

<div class="project-box">
    <a href="#" class="project-link">
        <div class="project-picture-container">
            <img src="http://b.vimeocdn.com/ps/359/823/3598236_300.jpg" width="182px" height="142px" alt="project image">
        </div>
        <div class="project-desc-container">
            <div class="project-heading-container">
                <h2 class="project-heading">
                    Project Name
                </h2>
            </div>
            <h3 class="project-desc-heading">
                This is the description about the project.
            </h3>
        </div>

    </a>
</div>

Demo

希望它能按你的意愿运作。

锚标记不占其内容的高度

1 个答案:

CSS：

HTML：