我是新来的，所以请不要生吃我。这个地方令人生畏。
无论如何，我正在使用 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>
最佳答案
根据百分比而不是点和像素设置宽度。
总宽度跨度不应超过总行跨度的 100%。
我这里的意思是，如果3个DIV在同一行，它们的宽度总和应该是100%
示例:DIV#1:40%，DIV#2:20%，DIV#3:您猜对了 40%。
另一种控制方法是永远不要使用position:relative，它只与您的浏览器有关，您的网络在不同设备上的工作方式不同。
关于html - 使用 CSS 时，如何在缩小浏览器时防止 DIV 重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35459772/