Блог

Главная - Вопросы по программированию - Как разместить разделы «input» и «output_wrapper» рядом в записной книжке IPython

Как разместить разделы «input» и «output_wrapper» рядом в записной книжке IPython

#css #ipython-notebook

#css #jupyter-записная книжка

Вопрос:

Я хотел бы разместить разделы ввода и вывода в ячейке IPython Notebook рядом, а не вертикально.

Я попытался сократить ширину и переместить разделы (с помощью пользовательского CSS в ~/.ipython/profile_default/static/custom.css ), но, хотя ширина кажется правильной, два раздела по-прежнему не расположены рядом.

Это CSS:

 .input {
  width: 45%;
  float: left;
}

.output_wrapper {
  width: 45%;
  float: left;
}

И вот скриншот:

Скриншот

Комментарии:

1. Отображается ли custom.css файл на вкладке Sources в Chrome Dev Tools? В случае, если это произойдет, вероятно, проблема со спецификой селектора. Как вы можете видеть в инспекторе стилей на скриншоте, у них <div class="input"> есть селектор div.input , и поскольку это более конкретно, чем .input как в custom.css , то именно этот стиль будет отображаться.

Ответ №1:

У Маттиаса Бюссонье есть ответ здесь. Важным дополнением, по-видимому, является

 div.cell {
  flex-direction:row;
}

для css.

Версия html-ячейки, которую он разместил в списке рассылки ipython-dev, использует подход, отличный от вашего:

 %%html
<style>
div.cell{
    box-orient:horizontal;
    flex-direction:row;
}

div.cell *{
    width:100%;
}

div.prompt{
    width:80px;

}
</style>