Skocz do zawartości

Rozmieszczenie koła w HTML i CSS (Tabela)


UszaTek
 Udostępnij

Przejdź do rozwiązania Rozwiązane przez aXenDev,

Rekomendowane odpowiedzi

Witam. Na jakiej zasadzie mogę zrobić aby koła były rozmieszczone obok siebie oraz żeby były od początku tabeli a nie w środku.

<table border="1" cellspacing="3" cellpadding="5" align="center" style="width: 1500px; height: 505px;">
		<tr>
			<td style="width: 75%;">
				
				<div id="kolo">
					27°C
				</div> 
				
				<div id="kolo">
					27°C
				</div>
				
			</td>
	
			<td style="width: 25%;">
				Komórka2
			</td>
		</tr>
	</table>
#kolo
{
	width: 120px;
	height: 120px;
	border: 3px solid #F34A53;
	border-radius: 100%;
}

Bez tytułu.png

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert
  • Rozwiązanie
W dniu 27.11.2021 o 17:11, UszaTek napisał:

aby koła były obok siebie

Zainteresuj się flexem: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

W dniu 27.11.2021 o 17:11, UszaTek napisał:

żeby były od początku tabeli a nie w środku

Do określonej kolumny dodajesz:

vertical-align: top;

Całe rozwiązanie: https://codepen.io/aXen/pen/OJxLNwZ

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

Ok, spójrzmy więc na strukturę HTML:

<div class="container">
  <input type="radio" class="radio" name="progress" value="five" id="five">
  <label for="five" class="label">5%</label>

  <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
  <label for="twentyfive" class="label">25%</label>

  <input type="radio" class="radio" name="progress" value="fifty" id="fifty">
  <label for="fifty" class="label">50%</label>

  <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
  <label for="seventyfive" class="label">75%</label>

  <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
  <label for="onehundred" class="label">100%</label>

  <div class="progress">
    <div class="progress-bar"></div>
  </div>
</div>

W `.container` masz od razu "luźno" inputy z labelkami oraz `.progress`. W tym momencie nie możemy tego obrócić za jednym razem, w prosty sposób. Musimy zrobić tak, aby zastosować tą właściwość na jeden element - musimy opakować w/w elementy w jakiegoś diva i jemu nadać tą właściwość.
 

Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

×