HTML5 Три колонки с изменяемым размером слева / по центру и фиксированным справа - PullRequest
Новая
       0

HTML5 Три колонки с изменяемым размером слева / по центру и фиксированным справа

0 голосов
/ 18 апреля 2020

Я пытаюсь создать (полный экран) макет из трех столбцов с изменяемым размером левого / центрального столбца. Правый столбец всегда должен быть фиксированного размера и всегда справа.

Я использую стиль изменения размера, чтобы разрешить изменение размера левой области. Центральная область не регулируется по размеру, а просто следует вдоль и создает зазор с правой стороны DIV. Я не могу понять, что я делаю неправильно.

Я пробовал использовать DIV. Я буду счастлив использовать flex, если это лучший способ. Работает только на HTML5, так как для этого потребуются веб-сокеты. Хотел бы избежать JavaScript, если его можно просто стилизовать.

Спасибо: -) 

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

            #a_left         {
                                float:left;
                                height: 100vh;
                                width: 75%;
                                background-color: black;
                                overflow:auto;
                                resize: horizontal;
                            }
            #a_center       {
                                float:left;
                                height: 100vh;
                                min-width: 80px;
                                width:10%;
                                overflow: none;
                                background-color:darkgray;
                            }
            #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 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>

EDIT1:

После публикации этого вопроса и реализации решения из Антонио, я понял, что получу лучший результат, если сначала введу большой левый столбец DIV и фиксированный правый столбец DIV. Затем внутри левого столбца DIV я размещаю левый и центр и делаю их изменяемого размера.

Создает лучший общий UX при перетаскивании изменения размера.

Ответы [ 2 ]

1 голос
/ 18 апреля 2020

Использование дисплея flex. Вы можете поставить начальную ширину: «ширина: 75%» 

<!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>
0 голосов
/ 18 апреля 2020

Работает ли это? 

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

Максимальная ширина #a_left установлена ​​на 75%, а #a_center должен занимать не менее 80px, оставляя #a_right для заполнения максимальная ширина 40px

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...