CSS框在缩小时折叠

Question

我遇到了与缩小我正在使用的网页相关的问题。

当页面缩小时，框未对齐

正常看：

在缩小时：

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>

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>