Question

三个＆＃39; cols＆＃39;宽度改变时没有堆叠。

我今天晚上在网站上摆弄着一个网站，让这些专栏与float:left; width:300px;padding: 10px;一致，但它停止了工作，我忽略了测试响应性，因为我在它周围建立了网站，我＆＃39;已经将网站剥离到了骨头，仍然无法解决问题。

我一直在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 .three-cols设置为100%，因此不会根据屏幕尺寸进行调整。

div .main设置为980px，但由于它是.main的孩子，因此永远不会调整大小，并且也始终为.ORIG x3000 LEA R3, MEM LD R2, LINE LOOP LDI R0, KBSR ; Load the value of the KBSR into R0 BRzp LOOP ; If KBSR[15] = 0, no key has been pressed LDI R0, KBDR ; Copy the waiting character from the KBDR to R0 LDI R3, KBDR ; copy the wating character into R3 LOOP2 LDI R1, DSR ; Load the value of the DSR into R1 BRzp LOOP2 ; If DSR[15] = 0, the display is not ready ADD R2, R0, #-10 ; checks to see if Enter key was pressed BRz display : if so go to display characters BRnp LOOP display STI R3, DDR ; Copy the character in R0 to the Data display register ADD R3, R3, #1 ; update storatge location. HALT DSR .FILL xFE04 DDR .FILL xFE06 KBSR .FILL xFE00 KBDR .FILL xFE02 MEM .BLKW 10 LINE .fill #10 .END。

底线，.ORIG x3000 LOOP LDI R0, KBSR ; Load the value of the KBSR into R0 BRzp LOOP ; If KBSR[15] = 0, no key has been pressed LDI R0, KBDR ; Copy the waiting character from the KBDR to R0 LOOP2 LDI R1, DSR ; Load the value of the DSR into R1 BRzp LOOP2 ; If DSR[15] = 0, the display is not ready STI R0, DDR ; Copy the character in R0 to the DDR BRnzp LOOP HALT DSR .FILL xFE04 DDR .FILL xFE06 KBSR .FILL xFE00 KBDR .FILL xFE02 .END div需要根据屏幕大小进行调整。我的建议是看看bootstrap的网格，看看他们如何处理这种情况。

Answer 2

我已将#main元素的CSS更改为：

.main {
max-width: 980px;
margin: 0 auto;
}

http://jsfiddle.net/mj5o5f19/5/

响应式CSS停止工作

2 个答案: