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

Question

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

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

非常感谢任何帮助!!!

的jsfiddle：

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

我试图解决的重叠图片：

CSS：

DASessionRef session = DASessionCreate(kCFAllocatorDefault);
DASessionScheduleWithRunLoop(session, CFRunLoopGetCurrent(), kCFRunLoopDefaultMode);
DADiskRef disk = DADiskCreateFromBSDName(kCFAllocatorSystemDefault, session, bsdName);

DADiskUnmount((DADiskRef) disk, (DADiskUnmountOptions)kDiskUnmountOptionDefault, DiskUnmountCallback, NULL);

HTML：

@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
}

Answer 1

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

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

另一种控制方法是永远不要使用position：relative，只关注浏览器，你的网络在每台设备上的工作方式都不同。