Question

如果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;
    }

Answer 1

问题是，对于所有特价商品，您都要为元素指定底部。如果你键入div得到更高，但底部将是相同的推动你的内容。我建议你稍微修改你的代码，给所有元素一个适合你需要的固定高度：

.specialsFormat {
    margin: 0 auto;
    width: 300px;
    height: 250px; 
}

Example Here

Answer 2

不是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/

Div文本推送其他div

2 个答案: