Afișarea elementului HTML în linie orizontală (Programare, Html, Css)

Web_Designer a intrebat.

Am două elemente HTML în interiorul unui div. Vreau să le afișez într-un rând sau o linie orizontală. să zicem că am două imagini cu codul prezentat mai jos. Cum aș putea să fac în așa fel încât să nu existe o pauză de linie după primul element, astfel încât să fie afișate una după alta pe orizontală. În acest moment a doua imagine este afișată sub prima. Vreau ca a doua imagine să fie afișată în dreapta primei. Sunt destul de sigur că acest lucru se poate face în CSS. Vă rog să mă ajutați.

<img src="image one.jpg">
<img src="image two.jpg">

Comentarii

  • possible duplicate of Afișarea a două imagini una lângă alta pe o pagină HTML –  > Por Nikita Rybak.
  • Adăugați display : flex sau display : inline-flex la img –  > Por Choxmi.
4 răspunsuri
Sandwich

Opțiunea 1

img {
 display:inline;
}

Opțiunea 2

img {
 display:block;
 float:left;
}

Actualizat pentru a reflecta capacitățile actuale ale browserului

Opțiunea 3

img {
 display:inline-block;
}

Totuși, acest lucru va funcționa numai dacă există suficient spațiu orizontal pentru imaginile în cauză.

Comentarii

  • Vă mulțumim! Am folosit proprietatea float pe ambele elemente. –  > Por Web_Designer.
Babiker

Hack este de a seta position: relative; pe părintele div și

position: absolute; 
top: 0px; 
left: {left image's computed width}px; 

pe cel de-al doilea. În caz contrar, creșteți pur și simplu valoarea div dimensiunea.

Pikrass

Elementele de imagine sunt elemente inline, deci se afișează pe orizontală, dacă nu ai schimbat regula CSS „display”. Cred că nu ai suficient spațiu pentru ca ele să se potrivească pe orizontală.

Jonathan

Puteți face acest lucru cu ajutorul CSS (atributul position) sau cu un tabel. Acesta nu va avea o întrerupere de linie în mod implicit, cu excepția cazului în care imaginile sunt prea largi pentru a încăpea pe o linie. În acest caz, este un design discutabil pentru a le forța să fie pe aceeași linie.

Tags:,