如果mondaySpecial中的文本转到第二行,那么它将TuesdaySpecial-saturdaySpecial推到页面下方,这会弄乱div的格式。 任何其他特价都会发生同样的事情。他们下面的特价被推倒。我该如何防止这种情况?
<div id="specials"> <img src="SleepingMoonImages/menuSpecials.png" width="360" height="839" alt=""/> <div id="menuSpecials">
<div id="weeklySpecialsLabel">Weekly Specials </div>
<div id="redUnderline1"></div>
<div id="weeklySpecialsDays">
<div id="mondayLabel">Monday</div>
<div id="tuesdayLabel">Tuesday</div>
<div id="wednesdayLabel">Wednesday</div>
<div id="thursdayLabel">Thursday</div>
<div id="fridayLabel">Friday</div>
<div id="saturdayLabel">Saturday</div>
</div>
<div class="specialsFormat" id="mondaySpecial">Monday Special Goes Here df dsaf fds f sfd</div>
<div class="specialsFormat" id="tuesdaySpecial">Tuesday Special Goes Here</div>
<div class="specialsFormat" id="wednesdaySpecial">Wednesday Special Goes Here</div>
<div class="specialsFormat" id="thursdaySpecial">Thursday Special Goes Here</div>
<div class="specialsFormat" id="fridaySpecial">Friday Special Goes Here</div>
<div class="specialsFormat" id="saturdaySpecial">Saturday Special Goes Here</div>
</div> </div>
.CSS
.specialsFormat
{
float: left;
margin-right: 10px;
}
#mondaySpecial{
width:300px;
margin-left:auto;
margin-right:auto;
position:relative;
bottom:644px;
left:41px;
font-size:12px;
}
#tuesdaySpecial{
width:300px;
margin-left:auto;
margin-right:auto;
position:relative;
bottom:557px;
left:41px;
font-size:12px;
}
#wednesdaySpecial{
width:300px;
margin-left:auto;
margin-right:auto;
position:relative;
bottom:490px;
left:41px;
font-size:12px;
}
#thursdaySpecial{
width:300px;
margin-left:auto;
margin-right:auto;
position:relative;
bottom:405px;
left:41px;
font-size:12px;
}
#fridaySpecial{
width:300px;
margin-left:auto;
margin-right:auto;
position:relative;
bottom:317px;
left:41px;
font-size:12px;
}
#saturdaySpecial{
width:300px;
margin-left:auto;
margin-right:auto;
position:relative;
bottom:227px;
left:41px;
font-size:12px;
}
问题是对于您的所有特价商品,您都为元素指定了一个底部。如果您键入div 会变高,但底部将相同,将您的内容向下推。我建议你稍微修改一下你的代码,给所有元素一个适合你需求的固定高度:
.specialsFormat {
margin: 0 auto;
width: 300px;
height: 250px;
}
这里的例子
不是 100% 确定您希望布局的外观,但这里有一些标记可以帮助您:
.left
{
float: left;
margin-right: 10px;
}
.wrapme
{
max-width: 300px;
}
<div id="menuSpecials">
<b id="weeklySpecialsLabel">Weekly Specials </b>
<div id="redUnderline1"></div>
<div id="weeklySpecialsDays">
<div class="left" id="mondayLabel">Monday: </div><br/>
<p id="mondaySpecial">Special Goes Here df dsaf fds f sfd</p>
<div class="left" id="tuesdayLabel">Tuesday: </div><br/>
<p class="wrapme" id="mondaySpecial">Special Goes Here df dsaf fds f sfd Special Goes Here df dsaf fds f sfSpecial Goes Here df dsaf fds f sfSpecial Goes Here df dsaf fds f sf</p>
<div class="left" id="wednesdayLabel">Wednesday: </div><br/>
<p class="wrapme" id="mondaySpecial">Special Goes Here df dsaf fds f sfd Special Goes Here df dsaf fds f sfSpecial Goes Here df dsaf fds f sf</p>
<div class="left" id="thursdayLabel">Thursday: </div><br/>
<p class="wrapme" id="mondaySpecial">Special Goes Here df dsaf fds f sfd</p>
<div class="left" id="fridayLabel">Friday: </div><br/>
<p class="wrapme" id="mondaySpecial">Special Goes Here df dsaf fds f sfd</p>
<div class="left" id="saturdayLabel">Saturday: </div><br/>
<p class="wrapme" id="mondaySpecial">Special Goes Here df dsaf fds f sfd</p>
</div>
编辑:
看到您的网站后,我已经更新了我的答案 - 段落现在具有最大宽度,这将强制文本在第二天换行并向下推。
这里还有一个指向JS小提琴的链接来显示这一点:http://jsfiddle.net/loanburger/vzqohwvf/