Nano Hash - криптовалюты, майнинг, программирование

Как сделать условное поле для скрытых гибких панелей?

У меня есть исходный html:

body {
  background-color: grey;
}
.container{
  display: flex;
  width: 200px;
  height: 100px;
  background-color: red;
}
.panel{
  height: 100%;
  flex-grow: 1;
  flex-basis: 50%;
  color: white;
}
.left{
  background-color: green;
}
.left{
  margin-right: 8px;
}
.right{
  background-color: blue;
}
.hidden{
  display: none;
}
<div class="container">
  <div class="left panel ">left</div>
  <div class="right panel ">right</div>
</div>

Он создает две панели одинаковой ширины с отступом 8px между ними. Скрипка

Выглядит:

как это выглядит

Затем мне нужно скрыть правую или левую или обе панели со скрытым классом.

У меня есть новый html (fiddle):

<div class="container">
    <div class="left panel ">left</div>
    <div class="right panel hidden">right</div>
</div>

Результат:

введите здесь описание изображения

Как убрать поля, если панель одна, и показать поля, если панелей две? Я не могу просто переместить поле с левой панели на правую, потому что мне нужна возможность скрыть обе панели независимо.

UPD 1. Не могу удалить панели из dom. Он должен использовать скрытый класс.

html css flexbox
16.11.2016

Ответы:


1

Вы можете сделать это без удаления panel из DOM:

  1. Вместо margin-right на панели left используйте margin-left на панели right.

  2. Используйте приведенные ниже стили, чтобы избавиться от полей, когда любой из left или right имеет класс hidden:

    .container > .left.hidden + .right{
  margin-left:0;
}

См. демо ниже:

body {
  background-color: grey;
}
.container {
  display: flex;
  width: 200px;
  height: 100px;
  background-color: red;
}
.panel {
  height: 100%;
  flex-grow: 1;
  flex-basis: 50%;
  color: white;
}
.left {
  background-color: green;
}
.right {
  background-color: blue;
  margin-left: 8px;
}
.hidden {
  display: none;
}
.container > .left.hidden + .right{
  margin-left:0;
}
<div class="container">
  <div class="left panel">left</div>
  <div class="right panel">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel">left</div>
  <div class="right panel hidden">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel hidden">left</div>
  <div class="right panel">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel hidden">left</div>
  <div class="right panel hidden">right</div>
</div>

16.11.2016
  • спасибо, ваш подход решает проблему. Если вам интересно, посмотрите, пожалуйста, мое собственное решение. Это очень близко, но немного по-другому. Еще раз спасибо! 16.11.2016

    • 2

    Попробуйте использовать селектор +. При использовании этого селектора добавляется только поле, когда .right div помещается сразу после .left div.

    .left + .right{
   margin-left:8px;
}


    body {
  background-color: grey;
}
.container{
  display: flex;
  width: 200px;
  height: 100px;
  background-color: red;
  margin-bottom:20px;
}
.panel{
  height: 100%;
  flex-grow: 1;
  flex-basis: 50%;
  color: white;
}
.left{
  background-color: green;
}

.left + .right{
  margin-left:8px;
}
.right{
  background-color: blue;
}
.hidden{
  display: none;
}
    <div class="container">
  <div class="left panel">left</div>
  <div class="right panel">right</div>
</div>

<div class="container">
  <div class="left panel">left</div>
</div>

    16.11.2016

    3

    Это моя собственная версия, как это сделать. Преимущество: нет включения/отключения дополнительной маржи. Маржа применяется только тогда, когда это необходимо. Недостаток: Боюсь, он не очень гибкий.

    body {
  background-color: grey;
}
.container {
  display: flex;
  width: 200px;
  height: 100px;
  background-color: red;
}
.panel {
  height: 100%;
  flex-grow: 1;
  flex-basis: 50%;
  color: white;
}
.left {
  background-color: green;
}
.right {
  background-color: blue;
}
.hidden {
  display: none;
}

.container .left:not(.hidden) + .right:not(.hidden){
  margin-left: 8px;
}
    <div class="container">
  <div class="left panel">left</div>
  <div class="right panel">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel">left</div>
  <div class="right panel hidden">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel hidden">left</div>
  <div class="right panel">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel hidden">left</div>
  <div class="right panel hidden">right</div>
</div>

    16.11.2016
  • Это тоже приятно :) 16.11.2016

    • 4

    Вы также можете использовать селектор ~.

    .container > div ~ div {
    margin-left: 8px;
}
.container > .hidden + .right {
    margin-left: 0;
}

    Это позволит вам добавить немного места, если в .container есть 2, 3 или больше элементов.

    body {
  background-color: grey;
}
.container{
  display: flex;
  width: 200px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
}
.panel{
  height: 100%;
  flex-grow: 1;
  flex-basis: 50%;
  color: white;
}
.left{
  background-color: green;
}
.right{
  background-color: blue;
}
.hidden{
  display: none;
}
.container > div ~ div {
  margin-left: 8px;
}
.container > .hidden + .right {
    margin-left: 0;
}
    <div class="container">
    <div class="left panel ">left</div>
</div>
<div class="container">
    <div class="left panel ">left</div>
    <div class="right panel">right</div>
</div>
<div class="container">
    <div class="left panel ">left</div>
    <div class="right panel">right</div>
    <div class="right panel">right</div>
</div>

    16.11.2016
  • Не работает, если сделать левую панель скрытой. В этом случае правая панель будет иметь поле. И смотрите UPD 1 - не могу модифицировать dom и убрать панель. 16.11.2016
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..