Ustawienie divów problem początkującego

0

Hej, mam taki kod HTML:

<html>

<head>
    <link rel="stylesheet" href="styles.css">
    <title>Strona</title>
</head>

<body>
    <h2>List</h2>
    <table>
        <tr>
            <th>
                <div class="header-text-div">
                    Country
                </div>
                <div class="header-div-up">
                    1
                </div>
                <div class="header-div-down">
                    2
                </div>
            </th>
            <th>
                <div class="header-text-div">
                    Contact
                </div>
                <div class="header-div-up">
                    1
                </div>
                <div class="header-div-down">
                    2
                </div>
            </th>
            <th>
                <div class="header-text-div">
                    Country
                </div>
                <div class="header-div-up">
                    1
                </div>
                <div class="header-div-down">
                    2
                </div>
            </th>
        </tr>
        <!-- i dalej wiersze -->
    </table>
</body>

</html>

I takie style .css

/* style dla tabeli */

.header-text-div {
    background-color: chartreuse;
    height: 100%;
    width: 50%;
    float: left;
}

.header-div-up {
    background-color: darkblue;
    height: 50%;
    width: 50%;
    float: left;
}

.header-div-down {
    background-color: darkred;
    height: 50%;
    width: 50%;
    float: left;
}

Jak zrobić, żeby te divy w wierszu nagłówkowym wyświetlały się tak:

abc2.png

zamiast tak:

abc.png

Te 1 i 2 będą zastąpione potem innym tekstem

2

Możesz użyć dodatkowego diva który będzie wrapperem dla numerów 1 i 2.

Tak poza tym to polecam flexboxa lub grida do layoutu. Mają szerokie wsparcie dla nowoczesnych przeglądarek, floaty to relikt starych czasów. Mówię to bo nie wiem czy warto uczyć się z jakiś przestarzałych kursów gdzie ktoś klepie layouty na floatach.

3

W pełni popieram to, co napisał @szman powyżej.

  1. Znajdź inny kurs, bo float to prawie taki sam poziom prowizorki, co budowanie układu strony w oparciu o tabelki
  2. Floata czasem się używa, ale to jak się znasz i wiesz, co chcesz osiągnąć. Natomiast totalnie się to nie nadaje do budowania układu strony i rozmieszczania elementów.
  3. Tak, jak pisał przedmówca - poszukaj haseł grid i flex. Na początku na pewno będziesz trochę tym przygnieciony, bo jest tam dużo możliwości i pewnie też nie będziesz czuł kiedy użyć jednego, a kiedy drugiego.
  4. Moja rada - odstaw (przynajmniej - na razie) ten kurs i zrób sobie z 2 dni eksperymentów z grid i flex. Ćwicz układy, różne kolumny, przechodzenie między wierszami itp. jestem pewien, że za 2 dni jak spojrzysz na ten wątek to się walniesz w czoło i z poczuciem zażenowania powiesz "a ja to chciałem zrobić na float" ;)

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