Question

我正在创建代表页面的4个框。现在，它们正确显示出来。 See here

该结果是通过以下代码实现的：

HTML

<div class="content">
    <div class="container">
        <div class="boxes">
            <div class="box carpet">
                <p>Carpet Cleaning</p>

                <img class="box" src="images/carpet.jpg" alt="carpet cleaning" />
                <img class="box box-overlay box-overlay-carpet" src="images/overlay.png" />
            </div>


            <div class="box upholstery">
                <p class="long-name">Upholstery Cleaning</p>

                <img class="box" src="images/upholstery.jpg" alt="upholstery cleaning" />
                <img class="box box-overlay box-overlay-upholstery" src="images/overlay.png" />
            </div>

            <div class="box area-rug">
                <p class="long-name">Area Rug Cleaning</p>

                <img class="box" src="images/area-rug.jpg" alt="area rug cleaning" />
                <img class="box box-overlay box-overlay-area-rug" src="images/overlay.png" />
            </div>

            <div class="box vct">
                <p>VCT Cleaning</p>

                <img class="box" src="images/vct.jpg" alt="vct cleaning" />
                <img class="box box-overlay box-overlay-vct" src="images/overlay.png" />
            </div>
        </div>
    </div>
</div>

CSS

body {
    background: #F2F2F2;
    font-family: Arial;
    font-size: 24px;
    margin: 0;
}

div {
    box-sizing: border-box;
}

.container {
    margin: 0 auto;
    width: 95%;
}

/***********/
/* Content */
/***********/

.content {
    background: url("images/desert.jpg");
    background-size: cover;
    text-align: center;
}

.content .boxes {
    margin-top: 83px;
    background: black;
    overflow: hidden;
}

.content .box {
    width: 25%;
    position: relative;
    vertical-align: middle;
    float: left;
}

.content .box-overlay,
.content .box p {
    position: absolute;
    left: 0px;
}

.content .box p {
    z-index: 100;
    display: inline;
    margin: 37% 25%;
    color: #ffffff;
    font-size: 150%;
}

.content .box .long-name {
    margin-right: 15%;
    margin-left: 15%;
}

.content .box img {
    width: 100%;
}

.content .box-overlay {
    opacity: 0.5;
}

.content .box-overlay-carpet {
    background: #00DAFF;
}

.content .carpet:hover {
    background: #00B0CC;
}

.content .carpet:hover > p {
    color: #E5BF00;
}

.content .box-overlay-upholstery {
    background: #00FF21;
}

.content .upholstery:hover {
    background: #00CC17;
}

.content .upholstery:hover > p {
    color: #E5BF00;
}

.content .box-overlay-area-rug {
    background: #FFD800;
}

.content .area-rug:hover {
    background: #CCAA00;
}

.content .area-rug:hover > p {
    color: #E5BF00;
}

.content .box-overlay-vct {
    background: #FF2B00;
}

.content .vct:hover {
    background: #CC2100;
}

.content .vct:hover > p {
    color: #E5BF00;
}

但是，我需要这些盒子是可点击的。所以在HTML中，我只是删除了p元素，并用围绕文本和img元素的元素替换它们。我还将CSS中的p元素更改为元素。

结果呢？一切都消失了。

我确实意识到我对网络开发的了解正处于成长阶段，但我想知道是什么导致风格从简单地将p元素更改为元素而崩溃。

这是最终的代码：

HTML

    <div class="content">
       <div class="container">
           <div class="boxes">
               <div class="box carpet">
                <a href="#">
                    Carpet Cleaning

                    <img class="box" src="images/carpet.jpg" alt="carpet cleaning" />
                    <img class="box box-overlay box-overlay-carpet" src="images/overlay.png" />
                </a>
               </div>


               <div class="box upholstery">
                   <a href="#" class="long-name">
                       Upholstery Cleaning

                    <img class="box" src="images/upholstery.jpg" alt="upholstery cleaning" />
                    <img class="box box-overlay box-overlay-upholstery" src="images/overlay.png" />
                </a>
               </div>

               <div class="box area-rug">
                   <a href="#" class="long-name">
                       Area Rug Cleaning

                    <img class="box" src="images/area-rug.jpg" alt="area rug cleaning" />
                    <img class="box box-overlay box-overlay-area-rug" src="images/overlay.png" />
                </a>
               </div>

               <div class="box vct">
                   <a href="#">
                       VCT Cleaning

                    <img class="box" src="images/vct.jpg" alt="vct cleaning" />
                    <img class="box box-overlay box-overlay-vct" src="images/overlay.png" />
                </a>
               </div>
           </div>
       </div>
    </div>

CSS

body {
    background: #F2F2F2;
    font-family: Arial;
    font-size: 24px;
    margin: 0;
}

div {
    box-sizing: border-box;
}

.container {
    margin: 0 auto;
    width: 95%;
}

/***********/
/* Content */
/***********/

.content {
    background: url("images/desert.jpg");
    background-size: cover;
    text-align: center;
}

.content .boxes {
    margin-top: 83px;
    background: black;
    overflow: hidden;
}

.content .box {
    width: 25%;
    position: relative;
    vertical-align: middle;
    float: left;
}

.content .box-overlay,
.content .box a {
    position: absolute;
    left: 0px;
}

.content .box a {
    z-index: 100;
    display: inline;
    margin: 37% 25%;
    color: #ffffff;
    font-size: 150%;
}

.content .box .long-name {
    margin-right: 15%;
    margin-left: 15%;
}

.content .box img {
    width: 100%;
}

.content .box-overlay {
    opacity: 0.5;
}

.content .box-overlay-carpet {
    background: #00DAFF;
}

.content .carpet:hover {
    background: #00B0CC;
}

.content .carpet:hover > a {
    color: #E5BF00;
}

.content .box-overlay-upholstery {
    background: #00FF21;
}

.content .upholstery:hover {
    background: #00CC17;
}

.content .upholstery:hover > a {
    color: #E5BF00;
}

.content .box-overlay-area-rug {
    background: #FFD800;
}

.content .area-rug:hover {
    background: #CCAA00;
}

.content .area-rug:hover > a {
    color: #E5BF00;
}

.content .box-overlay-vct {
    background: #FF2B00;
}

.content .vct:hover {
    background: #CC2100;
}

.content .vct:hover > a {
    color: #E5BF00;
}

Answer 1

问题是当你使用＆＃34; p＆＃34;标签你只包装文本内容，而当你使用＆＃34; a＆＃34;标记您正在包装文本和图像...所以这是您的问题的根源。只包装文本，问题就解决了示例：

<div class="box area-rug">
               <a href="#" class="long-name">
                   Area Rug Cleaning</a>

                <img class="box" src="images/area-rug.jpg" alt="area rug cleaning" />
                <img class="box box-overlay box-overlay-area-rug" src="images/overlay.png" />

           </div>

如果你想让整个东西都可以点击，那就把＃34; a＆＃34;标记为整个＆＃34; div＆＃34; 例如：

<a href="#">
        <div class="box upholstery">
            <p class="long-name">Upholstery Cleaning</p>

            <img class="box" src="images/upholstery.jpg" alt="upholstery cleaning" />
            <img class="box box-overlay box-overlay-upholstery" src="images/overlay.png" />
        </div></a>

Answer 2

从布局角度来看，

p和a不可互换：p是block标记，而a是inline标记。这对页面上的内容流产生了重大影响;虽然块元素具有边界框，但内联元素与页面上的内容一起流动 - 考虑p与i的行为。如果您将内容放在p标记中，它将在其自己的行上，包含其前后的内容;如果您将内容放在i标记中，它将正常流动并附带文本，包括在标记内容中间的自动换行。

如果您在内部使用a元素现有p元素，则应该获得您正在寻找的行为。

另请注意@ BaDsHahSHIVAM的回答 - 您不仅更改了您正在使用的标签，还它的内容。这也会对页面布局产生重大影响。有很多方法可以解决这个问题：

将整个div换成a

在div
中包含a的全部内容
将p和每个img的内容包含在单独的a代码中，每个代码都使用相同的href

Answer 3

一种解决方案是使用以下代码使盒子本身可以点击：

<div class="box" onclick="location.href='#'">

这将使整个框可以点击。您还可以通过更改光标样式来显示可以单击该框：

<div class="box" onclick="location.href='#';" style="cursor:pointer;">

当我将它们变成链接时，为什么我的盒子会变平

3 个答案: