gpt4 book ai didi

html - 在窗口调整大小时并排对齐两个 div 而不会失真

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

  <!doctype html>
<html>
<head>
<title>SIGN IN</title>
<link type="text/css" rel="stylesheet" href="freshstyle.css">
</head>
<body>


<div id="header1">

</div>

<div id="header2">

</div>


<div class="content">
<div id="main">
<p>The December 1969 nor'easter was an intense winter storm that most notably impacted
the Northeastern United States and southern Quebec on December 25–28.
The multi-faceted storm system was blamed for at least 20 deaths in the United States
and 15 in Canada.
After developing over Texas and spawning several damaging tornadoes in the Deep South,
the cyclone advanced to the Eastern Seaboard, dropping more than 1 ft (30 cm) of snow
as far south as Washington, D.C. The nor'easter intensified and slowed as it moved into
New England, delivering 40 inches (100 cm) of snowfall in some places, with heavy rain
near the coast and a severe ice storm in Vermont and New Hampshire. In Canada, Montreal
received 27.5 in (70 cm) of snow over a period of 60 hours. Equipment failures and
drifts up to 30 ft (9 m) left roadways blocked for many days throughout the affected
region, and some communities became inaccessible except by snowmobile.
The weight of the snow and ice, combined with gale-force winds, collapsed roofs and
brought down power lines. Ice jams and excessive rainfall created widespread flooding
in eastern New England. (Full article...) </p>
</div>
<div class="sideryt">
<div id="login">
<form action="" method="">
<table cellpadding=2 cellspacing=5 >

<tr>
<td>
<label for="fname"><b>Email</b></label> </td>
<td><input type="text" id="fname" name=""/></td></tr>
<tr><td>
<label for="fname"><b>Password</b></label></td>
<td><input type="text" id="fname" name=""/></td></tr>

<tr><td colspan=2>
<a class="button" href="">Login</a></td>
</tr>
</table>
</form>
</div>

<div class="create">
<h1>Create an account</h1>
<h2>register for free.Always!</h2></div>
<div id="signup">
<form action="" method="">
<table cellpadding=2 cellspacing=5 >
<tr><td colspan=2>
<a class="button" href="file:///S:/mini%20project%20stuff/sign_up.html">Signup</a></td>
</tr>
</table>
</form>

</div>
</div>
</div>

<div id="footer">
<div id="foot">
<ul>
<li><a href="">About Us</a></li>
<li><a href="">FAQS</a></li>
<li><a href="">contacts</a></li>
</div>
copyright &copy shiv 2016
</div>


</body>

</html>

调整窗口大小时的 sideryt div 是垂直固定的,但我希望它是水平固定的。它还会在调整窗口大小时扭曲页面。如果可能的话,还可以帮助我提供任何其他更好的解决方案来修复 sideryt div。我的 CSS 代码在这里:`

body{
background-color:cyan;
margin:10px;
font:40px;
font-family:arial,Verdana,Times New Roman,Sans-Sherif;

}
#header1{
margin:10px;
font-size:45px;
height:90px;
background-color:red;
}
#header2{
height:35px;
margin:10px;
background-color:blue;
}
/* html {
height: 100%;
}
body {
min-height: 100%;
background-color:cyan;
} */
.content{

overflow:auto;
margin: 10px;

/*height: 100%;
width:100%; */
background-color:brown;
position:relative;

}
#main{
background-color:yellow;
/* display: inline-block; */
padding:20px;
margin:10px;
font-size:20px;
font-family:arial,Verdana,Times New Roman,Sans-Sherif;
float:left;
display:inline;
word-wrap: break-word;


/* height: 100%;*/
width:50%;
/* display: inline; */
/* vertical-align:top; */


}
.sideryt{
display: inline;
vertical-align:top;
background-color:brown;
font-size:105%;
font-family:arial,Verdana,Times New Roman,Sans-Sherif;
padding:20px;
margin:10px;
/* display: inline-block; */
width:40%;
/*height:100%; */
float:right;
/* left:0; */
position:fixed;
left:53%;
display: block;
display:table;


}

.button{
background: #e7e7e7;
border: 1px solid;
border-radius:5px;
text-decoration:none;
line-height: 28px;
padding: 0 10px;
text-align: center;
margin-left:130px;
box-sizing: border-box;

clear:left;
}
.fpss{
margin-left:110px;
text-decoration:none;
}
.create{
line-height:150%;
margin-left:50px;
}

#footer{
background-color:green;
margin:10px;
font-size:105%;
clear:both;
color:yellow;
text-align:center
}
#foot {
background-color: green;
margin: 0px;
height: 35px;
font-weight:bold;
font-size: 20px;
}
#foot ul {
padding: 0;
margin: 0;
list-style-type: none;
text-align: center;
}
#foot li {
display: inline;
padding: 10px;
vertical-align:middle;
}
#foot a{
text-decoration:none;
color: cyan;
padding: 5px 5px 5px 5px;
color: white;
vertical-align:middle
}
#foot a:hover{
color: black;
background-color:white;
}

ul{
padding:0px;
list-style-type: none;
}

a{
color:#666;
text-decoration: none;

}
a:hover {
color: #000;
background-color: #dadada;
border-radius: 3px;}

最佳答案

看看……对你有帮助吗……如果你使用任何框架,如 bootstrap 或 media-query ,那么它会更容易。谢谢,请告诉我。

body{
background-color:cyan;
margin:10px;
font:40px;
font-family:arial,Verdana,Times New Roman,Sans-Sherif;

}
#header1{
margin:10px;
font-size:45px;
height:90px;
background-color:red;
}
#header2{
height:35px;
margin:10px;
background-color:blue;
}

.content{

overflow:hidden;
margin: 10px;
background-color:brown;
position:relative;

}
#main{
background-color:yellow;
/* display: inline-block; */
padding:20px;
margin:10px;
font-size:20px;
font-family:arial,Verdana,Times New Roman,Sans-Sherif;
float:left;
display:inline;
word-wrap: break-word;
width:35%;
}
.sideryt{

/*vertical-align:top;*/
float : right;
background-color:brown;
font-size:105%;
font-family:arial,Verdana,Times New Roman,Sans-Sherif;
padding:20px;
margin:10px;
display: inline-block;
width:35%;
position:static;

}

.button{
background: #e7e7e7;
border: 1px solid;
border-radius:5px;
text-decoration:none;
line-height: 28px;
padding: 0 10px;
text-align: center;
margin-left:130px;
box-sizing: border-box;

clear:left;
}
.fpss{
margin-left:110px;
text-decoration:none;
}
.create{
line-height:150%;
margin-left:50px;
}

#footer{
background-color:green;
margin:10px;
font-size:105%;
clear:both;
color:yellow;
text-align:center
}
#foot {
background-color: green;
margin: 0px;
height: 35px;
font-weight:bold;
font-size: 20px;
}
#foot ul {
padding: 0;
margin: 0;
list-style-type: none;
text-align: center;
}
#foot li {
display: inline;
padding: 10px;
vertical-align:middle;
}
#foot a{
text-decoration:none;
color: cyan;
padding: 5px 5px 5px 5px;
color: white;
vertical-align:middle
}
#foot a:hover{
color: black;
background-color:white;
}

ul{
padding:0px;
list-style-type: none;
}

a{
color:#666;
text-decoration: none;

}
a:hover {
color: #000;
background-color: #dadada;
border-radius: 3px;}
<!doctype html>
<html>
<head>
<title>SIGN IN</title>
<link type="text/css" rel="stylesheet" href="freshstyle.css">
</head>
<body>


<div id="header1">

</div>

<div id="header2">

</div>


<div class="content">
<div id="main">
<p>The December 1969 nor'easter was an intense winter storm that most notably impacted
the Northeastern United States and southern Quebec on December 25–28.
The multi-faceted storm system was blamed for at least 20 deaths in the United States
and 15 in Canada.
After developing over Texas and spawning several damaging tornadoes in the Deep South,
the cyclone advanced to the Eastern Seaboard, dropping more than 1 ft (30 cm) of snow
as far south as Washington, D.C. The nor'easter intensified and slowed as it moved into
New England, delivering 40 inches (100 cm) of snowfall in some places, with heavy rain
near the coast and a severe ice storm in Vermont and New Hampshire. In Canada, Montreal
received 27.5 in (70 cm) of snow over a period of 60 hours. Equipment failures and
drifts up to 30 ft (9 m) left roadways blocked for many days throughout the affected
region, and some communities became inaccessible except by snowmobile.
The weight of the snow and ice, combined with gale-force winds, collapsed roofs and
brought down power lines. Ice jams and excessive rainfall created widespread flooding
in eastern New England. (Full article...) </p>
</div>
<div class="sideryt">
<div id="login">
<form action="" method="">
<table cellpadding=2 cellspacing=5 >

<tr>
<td>
<label for="fname"><b>Email</b></label> </td>
<td><input type="text" id="fname" name=""/></td></tr>
<tr><td>
<label for="fname"><b>Password</b></label></td>
<td><input type="text" id="fname" name=""/></td></tr>

<tr><td colspan=2>
<a class="button" href="">Login</a></td>
</tr>
</table>
</form>
</div>

<div class="create">
<h1>Create an account</h1>
<h2>register for free.Always!</h2></div>
<div id="signup">
<form action="" method="">
<table cellpadding=2 cellspacing=5 >
<tr><td colspan=2>
<a class="button" href="file:///S:/mini%20project%20stuff/sign_up.html">Signup</a></td>
</tr>
</table>
</form>

</div>
</div>
</div>

<div id="footer">
<div id="foot">
<ul>
<li><a href="">About Us</a></li>
<li><a href="">FAQS</a></li>
<li><a href="">contacts</a></li>
</div>
copyright &copy shiv 2016
</div>


</body>

</html>

关于html - 在窗口调整大小时并排对齐两个 div 而不会失真,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34972496/

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