well zeskakuje po wpisaniu tekstu

pytanie zadane 17 września 2017 w HTML i CSS przez Apper97 Obywatel (1,380 p.)

Witam.

Sprawa wyglada nastepujaco. Mam stowrzone 2 boxy na srodku strony przy pomocy <div class="well> ktore nastepujaco zmodyfikowalem w css:

.well-wrapper {
  width: 100%;
  text-align: center;
  
}

.well {
  display: inline-block;
  width:40%;
  height:350px;
  margin-top:60px;
  margin-left:40px;
  margin-right:40px;
  
}

Gdy w jednego z tych boxow wpisuje obojetnie co, to ten box zaczyna mi zeskakiwac,zmieniac miejsce itp itd.

Jak mote temu zaradzic? planuje oprocz tekstu do kazdego boxu dodac img.

Tutaj link do projektu gdyby sam css nie wystarczal. https://codepen.io/Apper97/pen/VMvpVW

komentarz 17 września 2017 przez Programista31 Użytkownik (640 p.)

W klasie well dodaj float:left; i dopasuj sobie px.

komentarz 17 września 2017 przez Apper97 Obywatel (1,380 p.)

Dlaczego nie moge np dac float center?

I jesli musze uzyc left to dopasowac to px poprzez margin?

komentarz 17 września 2017 przez Programista31 Użytkownik (640 p.)

To już zależy jaki chcesz mieć dokładny odstępy boxów. Nie ma czegoś takiego jak float:center; :) masz tylko right lub left. Wystarczy że dopasujesz px w klasie well dokładnie te:

margin-left:40px;

margin-right:40px;

komentarz 18 września 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Pobaw się właściwościami:

display:flex;
flex-wrap: wrap;
justify-content: space-between; //lub center

i np. nadaj odpowiednią szerokość dla kontenera + margines automatycznie centrujący go w oknie. Wewnątrz lepiej operować właściwościami flex niż na sztywno marginesami w px. Będzie to bardziej płynne i lepsze dla mobilek/tabletów.

komentarz 18 września 2017 przez Programista31 Użytkownik (640 p.)

No mobile i tablety polecam programować od razu pod bootstrap-a albo media-queries :)

komentarz 18 września 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Jeśli dobrze pobawisz się z flexem + min-height / min-width to czasami w ogóle siatka bootka czy media query nie będą potrzebne, chyba, że istotnie zmieniasz layout ale to już zależy od konkretnej sytuacji.

Nie ma sensu używać bootstrapa od razu z założenia, bo tak i koniec. To tak samo jak z jQuery, użytym do zanimowania 3-4 elementów i aby móc użyć $ zamiast querySelectorAll... i nie, to nie jest mniej znaków, pod pod dolarkiem kryje się cała zaciągnięta biblioteka, a pod querySelectorAll kryje się natywny JS... podobnie flex vs bootstrap.

Nie twierdzę, aby nie używać bootstrapa i jQuery, w żadnym razie. Warto jednak zastanowić się, czy faktycznie w danym projekcie jest to potrzebne?

komentarz 18 września 2017 przez Programista31 Użytkownik (640 p.)

Jak dla mnie wole ułatwiać sobie życie niż utrudniać ale każdy ma swój gust. Po to są frameworki.

1 odpowiedź

odpowiedź 17 września 2017 przez Apper97 Obywatel (1,380 p.)

UP

gdy wprowadze tekst do obydwu well'ow wtedy wszystko wraca na miejsce, gdy dodam tylko do 1, to wtedy gdzies znika

komentarz 17 września 2017 przez Programista31 Użytkownik (640 p.)

Zrób padding i nie stosuj na sztywno zamknięcia height a min-height wtedy automatycznie ci zejdzie w dół box jeśli tekst będzie dłuższy.

https://codepen.io/Apper97/pen/VMvpVW