Question

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

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

{{1}}

Answer 1

看......对你有帮助吗？如果您使用任何框架，如bootstrap或媒体查询，那么它将更容易。谢谢，请告诉我。

method_missing

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

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 个答案: