在窗口大小調整期間，並排對齊兩個div而不會失真

Question

  <!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;}

Answer 1

看...對你有幫助......如果你使用像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, DC 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>

Answer 2

你可以嘗試這個......

.container {
 margin: 10px;
background-color:brown;
}
.sideryt {
/*max-width: 100%;*/
width: 50%;
background:brown;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
float: right;
}
.main {
width: 50%;
background:yellow;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
text-align: left;
}

在窗口大小調整期間，並排對齊兩個div而不會失真

問題描述

2 個解決方案

解決方案1
0 已采納 2016-01-24 05:42:21

解決方案2
0 2016-01-24 06:01:26

在窗口大小調整期間，並排對齊兩個div而不會失真

問題描述

2 個解決方案

解決方案1 0 已采納 2016-01-24 05:42:21

解決方案2 0 2016-01-24 06:01:26

解決方案1
0 已采納 2016-01-24 05:42:21

解決方案2
0 2016-01-24 06:01:26