Ящики для кода с горизонтальной полосой прокрутки каждый рядом? - PullRequest
Новая
       0

Ящики для кода с горизонтальной полосой прокрутки каждый рядом?

0 голосов
/ 19 марта 2020

Я хочу иметь:

  • некоторые боксы рядом,
  • , занимающие всю ширину порта просмотра
  • каждая с равной шириной
  • каждый с текстовым содержимым, где соблюдаются пробелы и строки не переносятся

См. Мою лучшую неудачную попытку ниже. white-space: pre;, который я должен избегать переноса строк, также приводит к тому, что столбцы не имеют одинаковую ширину.

Как это можно сделать? 

  window.document.querySelector("#xml").textContent = `<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>You should probably need to scroll to see this long line!</body>
  </note>`
.columns {
    display:flex;
    flex-direction:row;
    width:100%
}

.column {
    flex: 1;
}

.code {
    overflow: auto;
    word-wrap: normal;
    white-space: pre;
    font-family: monospace;
}
    <div class="columns">
      <div class="column">
        <span id="xml" class="code">
          xml
        </span>
      </div>
      <div class="column">
        <span id="json" class="code">
          json
        </span>
      </div>
    </div>

Ответы [ 2 ]

0 голосов
/ 19 марта 2020

Перемещение переполнения: авто; из класса кода в класс столбцов столбцы делались одинаково широкими, и это решало проблему.

Как таковой: 

  window.document.querySelector("#xml").textContent = `<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>You should probably need to scroll to see this long line!</body>
  </note>`
.columns {
    display:flex;
    flex-direction:row;
    width:100%
}

.column {
    overflow: auto;
    flex: 1;
}

.code {
    word-wrap: normal;
    white-space: pre;
    font-family: monospace;
}
    <div class="columns">
      <div class="column">
        <span id="xml" class="code">
          xml
        </span>
      </div>
      <div class="column">
        <span id="json" class="code">
          json
        </span>
      </div>
    </div>
0 голосов
/ 19 марта 2020

Надеюсь, я не ошибаюсь в вашем вопросе. Просто дайте вашим столбцам ширину. Если вы не хотите оборачиваться, вам придется жить с прокруткой из-за переполнения. 

window.document.querySelector("#xml").textContent =
`<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>You should probably need to scroll to see this long line!</body>
</note>`;
.columns {
  display: flex;
  flex-flow: row nowrap;
}

.column {
  width: 50%;
}

.code {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
  font-family: monospace;
}
<div class="columns">

  <div class="column">
    <div id="xml" class="code">xml</div>
  </div>

  <div class="column">
    <div id="json" class="code">json</div>
  </div>

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

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

...