gpt4 book ai didi

html - 3行流体布局中的div重叠定位

转载 作者:太空宇宙 更新时间:2023-11-04 09:13:14 26 4
gpt4 key购买 nike

在 css 的媒体查询之后,我有一个 3 行的流体布局

html, body {
height : 100%;
margin : 0;
padding : 0;
font-family : Arial, Helvetica, sans-serif;
font-size : 85%;
color : #333399;
}
h1 {
font-size : 380%;
font-weight : bold;
margin : 0;
}
#container {
width: 100%;
}
#header {
width:95%;
height:80px;
float:left;
top:0;
left:0;
}
#indexleft {
display:none;
}
#indexright {
float:left;
top:;
width:85%;
margin: 0 auto;
}

#footer {
float: left;
height: 50px;
left: 0;
width: 100%;
bottom: 0;
position: absolute;
}

#footer p {
text-align: center;
}
.clearCol{
display:none;
}
.space{
display:none;
}
.indexheader {
width: 95%;
text-align:center;
left:0;
top:20px;
margin-bottom:10px;

}

#indexcontainer {
left: 20px;
position: relative;
top: 0;
}
#indexcontainer .indextext{
width : 80%
}
#indexcontainer .formstyle{

width : 80%;
float: left;
margin-top: 10px;
vertical-align: middle;

}
input[type="submit"]:hover {
background-color : #652D91;
color : #FFFFFF;
cursor : pointer;
}
.button, .textfields, .select {
background-color : #BAB3D6;
border : 0;
color : #333399;
margin-bottom : 10px;
padding : 5px;
-webkit-appearance: none;
}
#indexcontainer .textfields {
margin-right: 10px;
width: 250px;
}
<div id="container">


<div id="indexleft">
<div class="top"></div>
<div><a href="#"><img alt="" src="#"></a></div
</div><div id="header">
<div class="indexheader"><h1>unblock code</h1></div>
</div>
<div>&nbsp;</div>
<div id="indexright">
<div id="indexcontainer">
<div><img alt="" src="#"></div>
<div class="indextext">request yours unblock code (check spam folder)</div>
<div class="formstyle">
<div class="error">&nbsp;</div>
<form action="#" method="post">
<div><input type="text" name="username" class="textfields">Username</div>
<div><input type="password" name="password" class="textfields">Password</div>
<div><input type="text" name="email" class="textfields">Email</div>
<div><input type="submit" value="Send" name="send" class="button"></div>
</form>
</div>
</div>
</div><div class="clearCol"></div>
<div id="footer">
<p>Copyright &copy; 2001-2017 localhost <a href="#">Conctat us</a></p>
<!-- **********end footer*********** -->
</div>
</div>

我有3个问题检查我的 CSS 代码段。

  1. 当窗口缩小时 header indexright 和 footer div 重叠
  2. 描述文本滑到下面而不是上面的文本字段
  3. 我希望页眉和页脚固定,索引右移

最佳答案

不知道我是否理解正确,但这应该很接近。

PS,使用表单标签。

html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
color: #333399;
}
h1 {
font-size: 380%;
font-weight: bold;
margin: 0;
}
#container {
width: 100%;
}
#header {
width: 95%;
top: 0;
left: 0;
}
#indexleft {
/*display:none;*/
}
#indexright {
float: left;
top: ;
width: 85%;
margin: 0 auto;
}
#footer {
float: left;
height: 50px;
left: 0;
width: 100%;
bottom: 0;
position: absolute;
}
#footer p {
text-align: center;
}
.clearCol {
display: none;
}
.space {
display: none;
}
.indexheader {
width: 95%;
text-align: center;
left: 0;
top: 20px;
margin-bottom: 10px;
}
#indexcontainer {
left: 20px;
position: relative;
top: 0;
}
#indexcontainer .indextext {
width: 80%
}
#indexcontainer .formstyle {
width: 80%;
float: left;
margin-top: 10px;
vertical-align: middle;
}
#indexcontainer .formstyle div{
clear: both;
}
input[type="submit"]:hover {
background-color: #652D91;
color: #FFFFFF;
cursor: pointer;
}
.button,
.textfields,
.select {
background-color: #BAB3D6;
border: 0;
color: #333399;
margin-bottom: 10px;
padding: 5px;
-webkit-appearance: none;
}
#indexcontainer .textfields {
margin-right: 10px;
width: 250px;
float: left;
}

.formstyle label{
line-height: 23px;
}

@media (max-width: 700px) {
#footer {
clear: both;
position: static;
float: none;
}
}
<div id="container">
<div id="indexleft">
<div class="top"></div>
<div>
<a href="#">
<img alt="" src="#">
</a>
</div </div>
<div id="header">
<div class="indexheader">
<h1>unblock code and if text is long header div overlap</h1>
</div>
</div>
<div>&nbsp;</div>
<div id="indexright">
<div id="indexcontainer">
<div>
<img alt="" src="#">
</div>
<div class="indextext">request yours unblock code (check spam folder)</div>
<div class="formstyle">
<div class="error">&nbsp;</div>
<form action="#" method="post">
<div>
<label>Username</label>
<input type="text" name="username" class="textfields"></div>
<div>
<label>Password</label>
<input type="password" name="password" class="textfields"></div>
<div>
<label>Email</label>
<input type="text" name="email" class="textfields"></div>
<div>
<input type="submit" value="Send" name="send" class="button">
</div>
</form>
</div>
</div>
</div>
<div class="clearCol"></div>
<div id="footer">
<p>Copyright &copy; 2001-2017 localhost <a href="#">Conctat us</a>
</p>
<!-- **********end footer*********** -->
</div>
</div>

关于html - 3行流体布局中的div重叠定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41964790/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com