我有产品网格布局,嵌套div用于框内的内容,然后在框中显示详细信息。但出于任何原因,我的文字不断浮动在它上面的div里面。
body{
margin: 0 auto;
max-width: 960px;
}
#big-divider{
text-align: center;
margin-bottom: 15px;
color: white;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
font-size: 32px;
}
#sub-stamp{
display: block;
margin: auto;
width: 100%;
max-width: 287px;
}
#header{
margin: 25px;
}
#header > img:nth-child(2){
display: block;
margin: auto;
margin-top:-10px;
width: 100%;
max-width: 746px;
}
h2{
font-family: avenir next, arial, sans-serif;
font-weight: 500;
font-style: oblique;
font-size: 33px;
text-align: right;
text-transform: uppercase;
margin:0;
margin-top:-42px;
line-height: 100%;
color: #31bbac;
}
h1{
font-family: avenir next, arial, sans-serif;
font-weight: 800;
font-size:41px;
background-color: #0033a0;
padding-top: 4px;
}
.box{
position: absolute;
display: block;
border: solid 3px #0033a0;
height: 310px;
width: 288px;
}
.price span{
font-family: avenir next, arial, sans-serif;
font-weight: 800;
background-color: #0033a0;
color: white;
font-size: 25px;
padding: 0px 5px;
}
#info{
position: inherit;
bottom:0px;
right: 0;
}
.box img{
display: block;
margin: auto;
width: 100%;
max-width: 252px;
padding: 15px;
}
#product-grid{
margin: 0 25px;
}

<!DOCTYPE html>
<html>
<head>
<title>YES TEST</title>
<link rel="stylesheet" type="text/css" href="yes-style.css">
<link rel="stylesheet" type="text/css" href="mobile.css">
</head>
<body>
<div id="header" >
<img src="img/top-shor-line-logo.png">
<img src="img/top-stamp-sale.png">
<h2>
CoJack Tables
</br>
Are Super Cheap
</h2>
</div>
<div id="big-divider">
<h1>
Save big on the things that you need!
</h1>
<img id="sub-stamp" src="img/tables.png">
</div>
<div id="product-grid">
<div class="offer">
<div class="box">
<div class="price">
<span>$<span>170.69</span></span>
</div>
<img src="img/cojack.jpg">
<div class="price" id="info">
<span>INFO</span>
</div>
</div>
</div>
<div class="details">
<h4>
CoJack Lift Table
</h4>
<span class="product-number">
195.1038.00
</span>
</div>
</div>
</body>
</html>
&#13;
非常感谢任何见解!
答案 0 :(得分:0)
我认为你需要让文字COJACK TABLES超级便宜到右下角。
您只需为 #header 添加位置:相对样式, 然后你需要添加
position:absolute;
right:0;
bottom:0:
表示h2元素