-2

好的，所以我正在尝试将链接集成到段落的流程中（直接在“1”的右侧，但由于某种原因它没有显示出来？我如何让它整合到流程中。这是一个http： //jsfiddle.net/5CMfv/供参考 谢谢

<div id="home-infobox">
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<a style="position:absolute; padding-left:30px;"><h1>Image1</h1><p>Kappa kappa kaap 1.    <p><a href="http://Kappa.com">more</a></p></a>
</div>
<div class="infobox_picture">
<img src="images/news.jpg" width="92" height="90">
<a style="position:absolute; padding-left:30px;"><h1>NEWS</h1><p>DKappakpapapapa</p>   </a>
</div>
<div class="infobox_picture">
<img src="images/314.JPG" width="93" height="90">
<a style="position:absolute; padding-left:30px;"><h1>The Team</h1><p>KappaKappa </p>   </a>
</div>
</div>

#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}

#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}

.infobox_picture {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
clear: both;
background-position: center bottom;
background-repeat: no-repeat;
background-color: white;
height: 90px;
position: relative;
}
.home-infobox ~ .home-infobox:before {
content: '';
position: absolute;
left: 0;
top: -8px;
width: 100%;
border-top: 1px solid black;
}

#home_infobox p a{
color: #3B4B7E;
text-decoration: none;
z-index:999;
position:relative;
 }
 #home_infobox p a:hover{
color: #475883;
text-decoration: underline;
 }



h1 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z- index:999}



h2 {font-family: 'Montserrat', sans-serif; font-size:25px; position:relative;}

h3 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z-index:999}
4

2 回答 2

2

您的 HTML 无效：

<p>Kappa kappa kaap 1.<p><a href="http://Kappa.com">more</a></p>

应该：

<p>Kappa kappa kaap 1. <a href="http://Kappa.com">more</a></p>

进一步检查，您还有其他 HTML 问题。

http://validator.w3.org/

于 2013-10-01T15:14:34.657 回答
0

你可以这样做：

    <div class="infobox_picture">
        <img src="images/image1.png" width="91" height="90">
        <div style="display:inline-block; position:absolute; padding-left:30px;">
            <h1><a href="#">Image1</a></h1>
            <p>Kappa kappa kaap 1.</p>
            <p><a href="http://Kappa.com">more</a></p>
        </div>
    </div>

一个 a 元素总是必须有一个 href 属性。最好在文本元素中放置一个“a”。所以，我将一个 div 元素放在你有一个“a”元素的地方，并添加了 display:inline-block css-property 以使这个块元素的行为有点像内联“a”元素。

于 2013-10-01T15:18:24.307 回答