使用CSS时，如何在缩小浏览器时防止DIV重叠？

Question

我是新来的，所以请不要活着吃我。 这个地方令人生畏。

无论如何，我正在使用HTML和CSS整理一个index.php文件。 看起来很棒-除了当我的浏览器变得非常小时，我的DIV会相互碰到。 包括下面的照片，以及我的CSS和HTML代码。

任何帮助将不胜感激！

JSFiddle：

https://jsfiddle.net/chrisbclark/3naymjh3/

我要修复的重叠图片：

CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}



body {
    line-height: 1;
    background: url("bk.jpg");
    background-size:cover;
}

.container{
    font-family: 'Open Sans', sans-serif;
    overflow: auto;

}
#head_wrap{
    position:fixed;
    width:100%;
    /* height of header */
    height:auto;
    /* end height of header */
    margin:0px auto;
    padding:4px;
    /* thickness of long red line */
    border-bottom:2px solid #FFFFFF;
    overflow: auto;
    /* end thickness of long red line */

}
#header{
    overflow: auto;

}
#form1{
    float:right;
    padding:10px;
}

.centered{
    position:absolute;
    background-color:white;
    font-family: 'Open Sans', sans-serif;
    font-size:small;
    margin-top: 25%;
    margin-left: 50%;
    opacity: 0.8;
  /* bring your own prefixes */
    transform: translate(-50%, -50%);

}
#loginform{
    padding:20px;
    box-shadow: 3px 3px 3px #E7E7E7;
}

p {
    color:#000000
}

HTML：

<!DOCTYPE html>

<html>
    <head>
        <title>snostream</title>
    <link rel="stylesheet" href="styles/style2.css" media="all">
    </head>


<body>
    <!--container starts-->
<div class="container">
        <!-- begin head wrap -->
        <div id="head_wrap">
            <!-- begin header -->
            <div id="header">
            <img src="images/logo.png">
            <form method="post" action="" id="form1">
                <input type="text" name="email" placeholder="Email">
                <input type="password" name="pass" placeholder="********">
                <input type="submit" name="sub" value="Login">
            </form>
            </div>
            <!-- end header -->
        </div>
        <!-- head wrap ends here -->

        <!--- main body --->

</div>

    <!--container ends-->
<div class="centered" id="loginform">
    <div id="thebox">
        <form action="" method="post">
            <table>
            <p>
            <h2>Registration:</h2>
            <br><br>
                <tr>
                    <td>Name:</td>
                    <td>
                    <input type="text" name="u_name">
                    </td>
                </tr>

                <tr>
                    <td>Email:</td>
                    <td>
                    <input type="text" name="u_email">
                    </td>
                </tr>

                <tr>
                    <td>Choose Password:</td>
                    <td>
                    <input type="text" name="u_pass" 
                    </td>
                </tr>

                <tr>
                    <td>Select Gender:</td>
                    <td>
                    <select name="u_gender">
                        <option>Select a Gender</option>
                        <option>Male</option>
                        <option>Female</option>
                    </select>
                </tr>

                <tr>
                    <td>Select Network:</td>
                    <td>
                    <select name="u_network">
                        <option>Select a Network</option>
                        <option>North Carolina</option>
                        <option>South Carolina</option>
                        <option>New York</option>
                        <option>California</option>
                    </select>
                </tr>

                <tr>
                    <td>Birthday:</td>
                    <td>
                    <input type="date" name="u_birthday">
                    </td>
                </tr>

                    </td>   
                <tr>
                    <td colspan="6">
                    <center><br><br><button name="sign_up">Submit</button>
                    </td>
                </tr>
                </p>
            </table>
        </form>
    </div>
</div>
</body>
</html>

Answer 1

根据百分比而不是点和像素设置宽度。

对于总行跨度，总宽度跨度不应超过100％。
我的意思是，如果3 DIV位于同一行中，则其宽度总和应为100％
示例：DIV＃1：40％，DIV＃2：20％，DIV＃3：您猜对了40％。

控制此情况的另一种方法是永远不要使用位置：相对而言，仅与您的浏览器无关，您的网络在每个设备上的工作方式都不同。

使用CSS时，如何在缩小浏览器时防止DIV重叠？

问题描述

1 个解决方案

解决方案1
2 2016-02-17 14:53:44

使用CSS时，如何在缩小浏览器时防止DIV重叠？

问题描述

1 个解决方案

解决方案1 2 2016-02-17 14:53:44

解决方案1
2 2016-02-17 14:53:44