CSS框縮小時崩潰

Question

我遇到了與縮小我正在使用的網頁相關的問題。

當頁面被放大了的箱子是錯位

正常看：

縮小時：

事業部結構

<div class="answerbox shadow"> 
<div class="content"> 
<p>What is an Annuity and how does it help with my retirement income?</p> 
</div> 
<p> <a class="more" href="aboutannunities">Find Out More</a></p></div> 

CSS代碼：

.answerbox { 
    height: 125px; 
/*Specify Height*/ 
    width: 250px; 
/*Specify Width*/ 
    border: 1px solid rgb(217, 217, 217); 
    border-radius: 3px 3px 3px 3px; 
    position: relative; 
    margin-bottom: 15px; 
    background: -moz-linear-gradient (rgb(20, 255, 255), rgb(230, 230, 230)) repeat scroll 0 0 transparent; 
    background: -o-linear-gradient(rgb(20, 255, 255), rgb(230, 230, 230)) repeat scroll** 0 0 transparent; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(20, 255, 255)), to(rgb(230, 230, 230))) repeat scroll 0 0 transparent; 
/* older webkit syntax */ 
    background: -webkit-linear-gradient(rgb(20, 255, 255), rgb(230, 230, 230)) repeat scroll 0 0 transparent; 
    word-wrap: break-word; 
    padding: 7px; 
} 

.shadow { 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: #666 0px 2px 3px; 
    -moz-box-shadow: #666 0px 2px 3px; 
    box-shadow: #666 0px 2px 3px; 
    background: #E6E6E9; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#E6E6E9)); 
    background: -webkit-linear-gradient(#FFFFFF , #E6E6E9); 
    background: -moz-linear-gradient(#FFFFFF , #E6E6E9); 
    background: -ms-linear-gradient(#FFFFFF , #E6E6E9); 
    background: -o-linear-gradient(#FFFFFF , #E6E6E9); 
    background: linear-gradient(#FFFFFF , #E6E6E9); 
    -pie-background: linear-gradient(#FFFFFF , #E6E6E9); 
    behavior: url(PIE.htc); 
} 

任何意見/建議/幫助將感激......

非常感謝......

Answer 1

<div style="width: 540px;float:left;"> 

在CSS中加入：

.answerbox { 
    float:left; 
..... 

，並嘗試使用下面的代碼：

<div style="width: 540px;float:left;"> 

    <div class="answerbox shadow"> 
    <div class="content"> 
     <p>What is an Annuity and how does it help with my retirement income?</p> 
    </div> 
    <p> <a class="more" href="aboutannunities">Find Out More</a></p></div> 


<div class="answerbox shadow"> 
    <div class="content"> 
     <p>What is an Annuity and how does it help with my retirement income?</p> 
    </div> 
    <p> <a class="more" href="aboutannunities">Find Out More</a></p></div> 

</div>