html - 响应式 CSS 停止工作

Question

随着宽度的变化，三个“cols”不再堆叠。

今晚我一直在摆弄一个网站，让列响应 float:left; width:300px;padding: 10px; 但它停止工作了，我在围绕它构建网站时忽略了测试响应能力，我已经将网站剥离到最基本的部分，但仍然无法解决问题.

我一直在 jsfiddle 中测试网站 - http://jsfiddle.net/mj5o5f19/3/

有人可以指出我错误的正确方向吗？

代码-CSS:

body {

}

input, textarea, select {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    color: #505050;
}

/* header CSS */
.break-top {
    width: 100%;
    height: 6px;
    background: url(images/break-top.gif);
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 74px;
    background: url(images/header.gif);
    margin: 0px auto;
    position: relative;
}

h1.logo {
    background: url(images/logo.gif) no-repeat;
    position: relative;
    width: 245px;
    height: 74px;
    margin: 0 auto;
}

.break {
    width: 100%;
    height: 6px;
    background: url(images/break.gif);
    margin: 0 auto;
}

/* Main Text CSS */
.main {
    width: 980px;
    margin: 0 auto;
}

/* Col CSS */
.three-cols {
    width: 100%;
    padding-top: 25px;
}

.col {
    float: left;
    width: 226px;
    text-align: justify;
    padding: 25px;
    border: 1px solid #000;
}

.col-last {
    margin-right: 0;
}


/* Footer CSS */
.footer {
    width: 100%;
    height: 45px;
    margin: 0 auto;
    bottom: 0;
    position: fixed;
}

.form-style-1 {
    margin:10px auto;
    max-width: 400px;
    padding: 20px 12px 60px 2px;
    font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}
.form-style-1 label{
    margin:0 0 5px 0;
    padding:0px;
    display:block;
    font-weight: bold;
}
.form-style-1 input[type=text], 
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
.form-style-1 input[type=tel],
textarea, 
select{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    padding: 7px;
    margin:0px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;  
}
.form-style-1 input[type=text]:focus, 
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 input[type=tel]:focus,
.form-style-1 textarea:focus, 
.form-style-1 select:focus{
    -moz-box-shadow: 0 0 8px #88D5E9;
    -webkit-box-shadow: 0 0 8px #88D5E9;
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
.form-style-1 .field-divided{
    width: 49%;
}

.form-style-1 .field-long{
    width: 100%;
}
.form-style-1 .field-select{
    width: 100%;
}
.form-style-1 .field-textarea{
    height: 100px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
    background: #4B99AD;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
    background: #4691A4;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}
.form-style-1 .required{
    color:red;
}

html:

<div id="main">
    <div class="main">
        <div class="three-cols">
            <div><br/>
            </div>
            <div class="col">
            </div>
            <div class="col">
            </div>
            <div class="col">
                <form action="" method="POST">
                    <ul class="form-style-1">
                        <li>
                            <label>Full Name <span class="required">*</span></label>
                            <input type="text" id="name" class="field-long" placeholder="Name"/>
                        </li>
                        <li>
                            <label>Email <span class="required">*</span></label>
                            <input type="email" id="email" class="field-long" placeholder="Email"/>
                        </li>
                        <li>
                            <label>Telephone<span class="required">*</span></label>
                            <input type="tel" id="telephone" class="field-long" placeholder="Telephone/Mobile"/>
                        </li>
                        <li>
                            <label>Your Message <span class="required">*</span></label>
                            <textarea id="message" class="field-long field-textarea"></textarea>
                        </li>
                        <li>
                            <input type="submit" value="Submit" />
                        </li>
                    </ul>
                </form>
            </div>
            <div><br/>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <p>&copy; 2015 </p>
</div>

Answer 1

您的容器 div .main 设置为 980px 因此不会根据屏幕尺寸向下调整。

div .three-cols 设置为 100% 但由于它是 .main 的子项，因此永远不会调整大小并且始终会也为 980px。

最重要的是，.main div 需要根据屏幕大小进行调整。我的建议是查看诸如 Bootstrap 网格之类的东西，看看它们如何处理这种情况。