Wyświetlenie tekstu pomiędzy obrazkami

0

Witam. Wybaczcie mi głupie pytanie ale nie dawno zacząłem i nie mam kogo spytać. Mam diva a w nim grafiki, Między nie chcę wstawić tekst. Potrzebuje tekstowi nadać klasę. Ale jak wstawię <p> <pre> to już wszystko się układa blokowo w pionie <p> jeszcze rozumiem bo to akapit. Musi coś być bo jak zdjęcia mogą być obok tyko że mam za małą jeszcze wiedzę dalej z tekstem już sobie poradzę. Dało by się coś podobnego zrobić?

<div id="pictures">
     <img src="img/img001.png" class="picture">
     < wstawiony tekst >
     <img src="img/img002.png" class="picture">
   < wstawiony tekst >
     <img src="img/img003.png" class="picture">
</div>
1

nadaj obrazkom jak i tekstowi klasy które mają (najlepiej) wielkości procentowe (od razu pod rwd) analogicznie jak ma większość frameworków css
np.
http://flexboxgrid.com/
https://philipwalton.github.io/solved-by-flexbox/demos/grids/

0

Grid jest super, choć w razie czego można to załatwić zwykłą tabelką – jeden wiersz, pięć komórek. W skrócie:

<table>
  <tr>
    <td><img src="image.jpg"></td>
    <td>text</td>
    <td><img src="image.jpg"></td>
    <td>text</td>
    <td><img src="image.jpg"></td>
  </tr>
</table>

Pozostaje kwestia ostylowania.

0

Przepraszam pośpieszyłem się
Dziękuję Wam bardzo. Grida po raz pierwszy to widzę i to jest super. Z tego co wyczytałem, (pomóżcie mi tylko, o ile mogę prosić, z nim wystartować) bo widzę że to bajka. Czy w moim przykładzie było by to tak:

<div class="row">
  <div class="box1 four"><img src="001.png"></div>	
  <div class="box2 four">dodany tekst</div>
  <div class="box3 four"><img src="002.png"></div>	
  <div class="box4 four">dodany tekst</div>
  <div class="box5 four"><img src="003.png"></div>
</div>

css np.

 .box2 four{
 height: 50%}</p> 

Teraz kilka podstawowych pytań jeśli pozwolicie:
Skąd przeglądarka wie że to Grid, może po nazwach klas i ich nie można zmieniać? amoże muszę jeszcze coś podopisywać ?
Czy właściwości w css w pisuje się normalnie zwłaszcza marginesy. Chodzi mi o to czy wystaczy margines-left, , margines-right,
Czy nad diven .row muszę robić kontener czy to już jest ten kontener. A i gdzie jest punkt zero jeśli chodzi pozycjonowanie dla osi x i y?
Z góry Wam dziękuję.

0

Na Grid nie znam się.

dzięcioł szary napisał(a):

Skąd przeglądarka wie że to Grid, może po nazwach klas i ich nie można zmieniać? amoże muszę jeszcze coś podopisywać ?

@czysteskarpety podał Ci link – poczytaj uważnie.

Czy właściwości w css w pisuje się normalnie zwłaszcza marginesy. Chodzi mi o to czy wystaczy margines-left, , margines-right,

No normalnie, masz zbiorczy margin, ale też osobno margin-left, margin-top itd.

Czy nad diven .row muszę robić kontener czy to już jest ten kontener.

U siebie masz kontener row, w którym masz osadzone pięć mniejszych – dobrze masz.

A i gdzie jest punkt zero jeśli chodzi pozycjonowanie dla osi x i y?

0 to góra, 0 to lewo.

0

Tak to jest dobrze, jest napis z boku tylko coś to centrowanie mi nie idzie. Niby się w poziomie wycentrowało ale mają duże odstępy między sobą nie wiem czy to marginesy. Chce wszystko wycentrować względem tego pojemnika w poziomie, środkowy div na środku i od niego równe ustalone odstępy(marginesy), a tekst dodatkowo wyśrodkowany w pionie. Moglibyście jeszcze na to zerknąć bo to jest jeszcze dla mnie czarna magia ale i tak za to wszystko Wam bardzo dziękuję.

<div id="container">
  <div id="prostokat">

     <div class="row">
        <div class="box1"><img src="img/img001.png"></div>	
        <div class="box2">dodany tekst</div>
        <div class="box3"><img src="img/img002.png"></div>
        <div class="box4">dodany tekst</div>
        <div class="box5"><img src="img/img003.png"></div>		
    </div>

  </div>
</div>
#container{ 
text-align: center;
  height: auto;
  background-color: #000000;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;}

#prostokat{
  margin: 0 auto;
   border: 1px solid #ffffff;
   width: 500px;}

.row{
   display: flex}

.box1{
   flex: 1}

.box2{
   flex: 1}

.box3{
   flex: 1}

.row-cell--center{
   align-self: center;}

.row--gutters{
  margin: -1em 0 0 -1em;}
0

Jeśli nie wiesz czy to padding, czy margin, czy jeszcze coś innego, to załaduj sobie stronę w przeglądarce, wejdź do narzędzi deweloperskich i poklikaj w elementy. Wszystkiego dowiesz się z informacji, jakie to narzędzie wyświetli.

Albo testowo dodaj sobie obramowanie dla osadzonych div-ów.

0

Już wcześniej dałem marginesy i padding na 0, więc ich nie może być. Tutaj tego akurat nie w kleiłem bo kombinuje. Ale masz racje dla świętego spokoju w chrome sprawdziłem ęlement. Nie ma paddingu ani marginesów ale okazało się że Grid podzielił kontener("prostokąt") w poziomie na równe części. Więc divy są porozstawiane w równych odległościach od siebie i krawędzi. Można by było policzyć ile zajmą divy z grafiką plus jakie chcemy odstępy i zrobić taki kontener, ale jak policzyć tekst w poziomie? Ale Grid jest świetny tylko go trzeba opanować

1 użytkowników online, w tym zalogowanych: 0, gości: 1