Próbuję utworzyć układ, który obejmuje zewnętrzny DIV z dwoma wewnętrznymi {x1}} s.

Oba dwa wewnętrzne DIV muszą być w środku pionowo.

Jeden z wewnętrznych DIV musi być zakotwiczony do prawej krawędzi zewnętrznej {X1}} (z kilkoma marginesem PX).

Pozostałe wewnętrzne DIV musi być poziomo wyśrodkowane w całym zewnętrznym {x1}}.

Coś takiego.

___________________________
|                         |
|[     some text      ][S]|
|_________________________|

"Jakiś tekst" DIV może siedzieć za "s" DIV lub obok niego, to nie ma znaczenia.

Nie mogę używać ::after jako "s" DIV musi mieć zdarzenie onClick dołączone do niego (w rzeczywistości jest to przycisk wyszukiwania w DIV)

Próbowałem wiele różnych sposobów, aby to osiągnąć, ale nic nie jest dobre.

W tej chwili mam następujące zastosowania display: flex, która jest blisko, ale nie do końca prawa.

#resultBox {
  border: 1px dotted black;
  border-radius: 5px;
  margin-top: 25px;
  margin-bottom: 15px;
  padding: 5px;
  padding-top: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

#resultText {
  font-family: myFont;
  font-size: 2.8vw;
  letter-spacing: 0.18em;
}

#searchButton {
  font-size: 1.5vw;
  cursor: pointer;
  padding: 20px;
}
<div id="resultBox">
  <div id="resultText">
    <span id="part1">Here's</span>
    <span id="part2">some</span>
    <span id="part3">text</span>
  </div>
  <div id="searchButton" onClick="search();">&#x1F50E</div>
</div>

To zbliża mnie, ale chcę searchButton DIV, aby trzymać się w prawo niezależnie od zawartości resultText DIV. Chyba mogłem użyć table, ale wydaje się nieco staroświecki.

0
Fat Monk 23 październik 2020, 15:34

1 odpowiedź

Najlepsza odpowiedź

Aby utrzymać swoje centrum tekstowe i ustawić ikonę wyszukiwania w prawo, możesz po prostu ustawić margines: Auto do tekstu:

#resultText {
  font-family: myFont;
  font-size: 2.8vw;
  letter-spacing: 0.18em;
  padding-left: calc(1.5vw + 40px); /** To compensate icon size on the right we add padding-left similar width **/
  margin: auto;
}

PRÓBNY

#resultBox {
  border: 1px dotted black;
  border-radius: 5px;
  margin-top: 25px;
  margin-bottom: 15px;
  padding: 5px;
  padding-top: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

#resultText {
  font-family: myFont;
  font-size: 2.8vw;
  letter-spacing: 0.18em;
  padding-left: calc(1.5vw + 40px); /** To compensate icon size on the right we add padding-left similar width **/
  margin: auto;
}

#searchButton {
  font-size: 1.5vw;
  cursor: pointer;
  padding: 20px;
}
<div id="resultBox">
  <div id="resultText">
    <span id="part1">Here's</span>
    <span id="part2">some</span>
    <span id="part3">text</span>
  </div>
  <div id="searchButton" onClick="search();">&#x1F50E</div>
</div>
1
MaxiGui 23 październik 2020, 13:23