Средняя коробка по центру переменной ширины, левый и правый поплавок прикреплены напрямую - PullRequest
Новая
       25

Средняя коробка по центру переменной ширины, левый и правый поплавок прикреплены напрямую

0 голосов
/ 04 июля 2019

Я создаю свои собственные карты Anki-Flashcards для изучения японского языка:

У меня есть три блока переменного размера в строке. Средний должен быть центрирован и иметь переменную ширину. Коробки слева и справа должны быть прикреплены к средней коробке. Три поля как группа НЕ должны быть центрированы. Я не хочу, чтобы они все одинакового размера, ни средний с фиксированным размером. Я не могу использовать JavaScript в среде, которую я использую.

При необходимости я могу исправить ширину правого поля (это значок), но левое и среднее поле являются переменными.

Я могу добиться этого, используя только средний блок и правый блок (см. Скрипка ), но не дополнительно с левым блоком. Или я могу переместить внешние блоки по краям (а не по направлению к среднему блоку), как здесь [ 1 ], но это не то, что я хочу. Flexbox тоже не то, что я хочу, см. [ 2 ]. Кроме того, этот [ 3 ] требует, чтобы ящики были одинакового размера.

HTML: 

<div class="card">
 <span class="left">
  Note (e.g. uncommon): 
 </span>
 <span class="middle">
  Alt JP Pronounciation
 </span>
 <span class="right">
  Alt audio button
 </span>
</div>

CSS: 

.left {
 position: absolute;
}
.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
 text-align: center;
}

Я хочу, чтобы строка примечания вела себя как строка "Японское произношение" (см. Fiddle ), просто присоединяя часть примечания слева.

EDIT: Кажется, пока не ясно, чего я хочу, поэтому я пытаюсь ASCII-Art: 

        [Left (this also asdf)][Middle (this might be long)][Right]
           ^attached to middle        ^centered                ^attached to middle
        |   complete line is not centered, just the middle part   |

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Благодаря Paulie_D и теме здесь я пришел к решению:

HTML: 

<div class="card">
 <div class="container">

  <span class="left">
   Note (e.g. uncommon): 
  </span>
  <span class="middle">
   Alt JP Pronounciation
  </span>
  <span class="right">
   Alt audio button
  </span>
 </div>
</div>

CSS: 

.right {
 border: 1px solid;
 flex-basis: 0%;
 flex-grow: 1;
 text-align: left;
}

.left {
 border: 1px solid;
 flex-basis: 0%;
 flex-grow: 1;
 text-align: right;
}

.middle {
 border: 1px solid;
}

.container {
 display: flex;
}

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
 text-align: center;
}
0 голосов
/ 04 июля 2019 
.right {
  float:left;
  border: 1px solid;
}
.middle {
  margin-left:3px;
  float:left;
  border: 1px solid;
}
...