Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Problem z rozmieszczeniem
Forum PHP.pl > Forum > Przedszkole
Radek_1
Witam,
Mam problem z rozmieszczeniem tekstu w divach.

Chciałbym, aby to było coś jak w tym przykładzie.
http://dzidek.info/xyz.php

Czyli "Data" po lewej, "Nick" na środku i "Cos" po prawej. Jednak jak używam znaczników <span> i margin to to jest zależne od ilości liter :/ Jak zrobić, by to było niezależne od liter i stało dokładnie po lewej, prawej i na środku?
kipero
To ma być coś w rodzaju tabelki? Tabele wcale nie są zakazane, ale nie powinny służyć do projektowania układu strony tylko do przedstawiania danych tabelarycznych.
Jeżeli bardzo chcesz to wstaw 3 divy i nadaj im szerokość po 33% i float: left/right.
JoShiMa
Do przedstawiania danych tabelarycznych służą tabele a nie divy. Tabelki nie są zakazane
barthpl
niemalże identyczny temat jest tutaj. Tylko w poszczególnych kolumnach musisz sobie odpowiednio zdefiniować text-align: left/center/right;
Radek_1
Dobra, to inaczej to przedstawię o co mi chodzi. To nie ma być tabela z kolejnymi wynikami czy czymś jak w przykładzie, który podał barthpl. To ma być do artykułów/newsów.
Mniej więcej jak tutaj:
http://dzidek.info/xyz.php (zedytowałem strone pokazując o co mi chodzi).

Czy faktycznie lepiej użyć tabeli mimo wszystko do tego?
kipero
Tak jak pisałem:
Wstawiasz 3 divy i nadajesz każdemu width: 33% i oczywiście odpowiednie wyrównanie tekstu.
barthpl
Do tego faktycznie div wygląda ok.
  1. <div class="content">
  2. <div class="tekst">Tutaj tekst....</div>
  3. <div class="date">data: </div>
  4. <div class="nick">nick: </div>
  5. <div class="cos">cos: </div>
  6. </div>

i
Kod
div.content {
    // ustalić szerokość;
    width: 500px;
    overflow: hiddden;
}
div.tekst{
    width: 100%;
}
div.date, div.nick, div.cos {
    width: 33%;
    float: left;
}
div.date {
    text-align: left;
}
div.nick {
    text-align: center;
}
div.cos {
    text-align: right;
}

Ewentualnie zamiast na procentach możesz poustalać wszystkie rozmiary (łącznie z wysokością) w pikselach.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.