HTML5三列布局，左/中可调，右固定_Html_Css

HTML5三列布局，左/中可调，右固定

html css

HTML5三列布局，左/中可调，右固定,html,css,Html,Css,我正在尝试制作一个（全屏）三列布局，具有可调整大小的左/中列。右边的列应该总是固定大小，并且总是向右我正在使用“调整大小”样式来允许更改左侧区域的大小。中间区域的大小没有调整，只是沿着右边的DIV方向移动，并与右边的DIV形成一个间隙。我不知道我做错了什么我一直在试着用div。如果这是一种更好的方式，我很乐意使用flex。只需要在HTML5上运行，因为它需要web套接字。如果可以简单地对JavaScript进行样式化，则希望避免使用JavaScript 谢谢：-）身体{ 保证金：0；填

我正在尝试制作一个（全屏）三列布局，具有可调整大小的左/中列。右边的列应该总是固定大小，并且总是向右

我正在使用“调整大小”样式来允许更改左侧区域的大小。中间区域的大小没有调整，只是沿着右边的DIV方向移动，并与右边的DIV形成一个间隙。我不知道我做错了什么

我一直在试着用div。如果这是一种更好的方式，我很乐意使用flex。只需要在HTML5上运行，因为它需要web套接字。如果可以简单地对JavaScript进行样式化，则希望避免使用JavaScript

谢谢：-）


身体{
保证金：0；
填充：0；
}
#容器{
溢出：无；
高度：100vh；
宽度：100vw；
保证金：0；
填充：0；
}
#a_左{
浮动：左；
高度：100vh；
宽度：75%；
背景色：黑色；
溢出：自动；
调整大小：水平；
}
#a_中心{
浮动：左；
高度：100vh；
最小宽度：80px；
宽度：10%；
溢出：无；
背景色：暗灰色；
}
#对{
浮动：对；
高度：100vh；
宽度：40px；
最小宽度：40px；
最大宽度：40px；
溢出：无；
背景色：深灰色；
颜色：白色；
}
#阿卢文本{
宽度：100%；
身高：95%；
溢出y：自动；
背景色：黑色；
颜色：白色；
}
#阿尔尤cmd{
宽度：100%；
身高：5%；
溢出：无；
背景色：深灰色；
}
#ac_图{宽度：100%；
身高：25%；
溢出：隐藏；
背景色：#22222；
颜色：白色；
}
#页面宽度：100%；
身高：75%；
溢出y：自动；
背景色：#22222；
颜色：白色；
}
这里有很多文字。
命令
这里有一个图像。
粘贴在这里的文本可能很长。
在

情商

他

编辑1：

在发布了这个问题并实现了Antonio的解决方案后，我意识到如果我首先实现一个大的左列DIV和固定的右列DIV，我会得到更好的结果。然后在左列DIV中，我将左列和中列放在一起，并使它们可以调整大小

拖动大小调整器时，它可以创建更好的总体用户体验。

这是否有效

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
      <style>
         body    {
         margin:0;
         padding:0;
         }
         #al_text        {
         width: 100%;
         height: 95%;
         overflow-y: auto;
         background-color: black;
         color:white;
         }
         #al_cmd         {
         width: 100%;
         height: 5%;
         overflow: none;
         background-color: darkslategray;
         }
         #ac_map         {   width:100%;
         height: 25%;
         overflow: hidden;
         background-color: #222222;
         color: white;
         }
         #ac_paged       {   width:100%;
         height: 75%;
         overflow-y: auto;
         background-color: #222222;
         color: white;
         }
         .container {
         display: flex;
         flex-flow: row nowrap;
         width: 100%;
         div{
         height: 100vh;
         }
         }
         #a_left {
         overflow: auto;
         resize: horizontal;
         height: 100vh;
         max-width: 75%;
         width: 100%;
         }
         #a_center {
         min-width: 80px;
         width: 100%;
         overflow: none;
         }
         #a_right {
         max-width: 40px;
         width: 100%;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div id="a_left">
            <div id="al_text" role="log" aria-live="polite">
               A lot of text goes here.
            </div>
            <div id="al_cmd">
               <table width="100%">
                  <tr>
                     <td style="width:10%; color:white;">Command</td>
                     <td style="width:70%;"><input style="width:97%;" type="text" id="message"/></td>
                     <td style="width:15%;"><input id="btnSend" type="button" value="Send" disabled="disabled" onclick="onSendClick()"></td>
                  </tr>
               </table>
            </div>
         </div>
         <!-- /a_left -->
         <div id="a_center">
            <div id="ac_map">
               An image goes here.
            </div>
            <div id="ac_paged" aria-live="polite">
               Text that sticks goes here and it could be very long. 
            </div>
         </div>
         <!-- /a_right -->
         <div id="a_right">
            In<br/>
            Eq<br/>
            He<br/>
         </div>
      </div>
      <!-- /container -->
   </body>
</html>


身体{
保证金：0；
填充：0；
}
#阿卢文本{
宽度：100%；
身高：95%；
溢出y：自动；
背景色：黑色；
颜色：白色；
}
#阿尔尤cmd{
宽度：100%；
身高：5%；
溢出：无；
背景色：深灰色；
}
#ac_图{宽度：100%；
身高：25%；
溢出：隐藏；
背景色：#22222；
颜色：白色；
}
#页面宽度：100%；
身高：75%；
溢出y：自动；
背景色：#22222；
颜色：白色；
}
.集装箱{
显示器：flex；
flex-flow：行nowrap；
宽度：100%；
div{
高度：100vh；
}
}
#a_左{
溢出：自动；
调整大小：水平；
高度：100vh；
最大宽度：75%；
宽度：100%；
}
#a_中心{
最小宽度：80px；
宽度：100%；
溢出：无；
}
#对{
最大宽度：40px；
宽度：100%；
}
这里有很多文字。
命令
这里有一个图像。
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
      <style>
         body    {
         margin:0;
         padding:0;
         }
         #al_text        {
         width: 100%;
         height: 95%;
         overflow-y: auto;
         background-color: black;
         color:white;
         }
         #al_cmd         {
         width: 100%;
         height: 5%;
         overflow: none;
         background-color: darkslategray;
         }
         #ac_map         {   width:100%;
         height: 25%;
         overflow: hidden;
         background-color: #222222;
         color: white;
         }
         #ac_paged       {   width:100%;
         height: 75%;
         overflow-y: auto;
         background-color: #222222;
         color: white;
         }
         .container {
         display: flex;
         flex-flow: row nowrap;
         width: 100%;
         div{
         height: 100vh;
         }
         }
         #a_left {
         overflow: auto;
         resize: horizontal;
         height: 100vh;
         max-width: 75%;
         width: 100%;
         }
         #a_center {
         min-width: 80px;
         width: 100%;
         overflow: none;
         }
         #a_right {
         max-width: 40px;
         width: 100%;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div id="a_left">
            <div id="al_text" role="log" aria-live="polite">
               A lot of text goes here.
            </div>
            <div id="al_cmd">
               <table width="100%">
                  <tr>
                     <td style="width:10%; color:white;">Command</td>
                     <td style="width:70%;"><input style="width:97%;" type="text" id="message"/></td>
                     <td style="width:15%;"><input id="btnSend" type="button" value="Send" disabled="disabled" onclick="onSendClick()"></td>
                  </tr>
               </table>
            </div>
         </div>
         <!-- /a_left -->
         <div id="a_center">
            <div id="ac_map">
               An image goes here.
            </div>
            <div id="ac_paged" aria-live="polite">
               Text that sticks goes here and it could be very long. 
            </div>
         </div>
         <!-- /a_right -->
         <div id="a_right">
            In<br/>
            Eq<br/>
            He<br/>
         </div>
      </div>
      <!-- /container -->
   </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
        <style>

body    {
          margin:0;
          padding:0;
          }

  #container      {
                      /*! overflow: none; */
                      height: 100vh;
                      width: 100vw;
                      margin: 0;
                      padding: 0;
                      display: flex;
                  }

  #a_left         {
                      /*! float:left; */
                      height: 100vh;
                      width: 75%; /* <--- Initial Width */
                      background-color: black;
                      overflow:auto;
                      resize: horizontal;
                  }
  #a_center       {
                      /*! float:left; */
                      height: 100vh;
                      min-width: 80px;
                      /*! width:10%; */
                      /*! overflow: none; */
                      background-color:darkgray;
                      flex: auto;
                  }
  #a_right        {
                      /*! float:right; */
                      height: 100vh;
                      width: 40px;
                      /*! min-width: 40px; */
                      /*! max-width: 40px; */
                      overflow:none;
                      background-color:darkslategray;
                      color:white;
                  }

  #al_text        {
                      width: 100%;
                      height: 95%;
                      overflow-y: auto;
                      background-color: black;
                      color:white;
                  }
  #al_cmd         {
                      width: 100%;
                      height: 5%;
                      overflow: none;
                      background-color: darkslategray;
                  }
  #ac_map         {   width:100%;
                      height: 25%;
                      overflow: hidden;
                      background-color: #222222;
                      color: white;
                  }
  #ac_paged       {   width:100%;
                      height: 75%;
                      overflow-y: auto;
                      background-color: #222222;
                      color: white;
                  }



    </style>
    </head>
    <body>
        <div id="container">
        <div id="a_left">
            <div id="al_text" role="log" aria-live="polite">
                A lot of text goes here.
            </div>
            <div id="al_cmd">
                <table width="100%">
                    <tr>
                        <td style="width:10%; color:white;">Command</td>
                        <td style="width:70%;"><input style="width:97%;" type="text" id="message"/></td>
                        <td style="width:15%;"><input id="btnSend" type="button" value="Send" disabled="disabled" onclick="onSendClick()"></td>
                    </tr>
                </table>
            </div>
        </div> <!-- /a_left -->
        <div id="a_center">
            <div id="ac_map">
                An image goes here.
            </div>
            <div id="ac_paged" aria-live="polite">
                Text that sticks goes here and it could be very long.
            </div>
        </div> <!-- /a_right -->
        <div id="a_right">
            In<br/>
            Eq<br/>
            He<br/>
        </div>
        </div> <!-- /container -->

        </body>
</html>