Jak podzielić div na dwie kolumny, gdy dzielimy tabelę?

Question

Tak naprawdę chciałem dwie sieci w jednym dziale, mam na myśli jedną siatkę w prawo, drugą po lewej ..... ale na razie siatka pojawia się. To samo, co w tabeli z dwoma rzędami !! tak samo jak to muszę podzielić div i dodać dwie siatki obok siebie. Mam nadzieję, że zrozumiesz mój punkt widzenia. Dziękując z góry wszystkim za wspaniałe wsparcie i odpowiedzi:

Answer 1

Utwórz dwa div wewnątrz głównego div

<div id="main"> 
<div id="left"></div> 
<div id="right"></div> 
</div> 

z CSS, naprawić każdy na właściwej stronie

#left { float:left } 
#right { float:right } 

Answer 2

Wszystko zależy od projektu, który chcesz osiągnąć dla tego stołu. Istnieje wiele podejść, z których każdy daje nieco inne wyniki.

1. Możesz zmienić właściwość CSSna elementach div. Najlepszą wartością do zastosowania będzie table-cell; jednak ta wartość nie jest obsługiwana przez żadną wersję IE. Możesz także wypróbować wartości inline lub inline-block.
2. Możesz sprawić, aby divy unoszą się w lewo w swoim kontenerze.
3. Możesz użyć bezwzględnego lub względnego pozycjonowania elementów div w swoim kontenerze; jednak takie podejście nie działa dobrze w przypadku projektów płynów.
4. Możesz przełączyć na span.

Answer 3

użyć tabeli. Bardziej sensowne jest używanie tabel, w których są bardziej wydajne. Takie rzeczy są przeznaczone na stoły i div nie jest stworzony.

Answer 4

Jest to rozszerzenie zaakceptowanej odpowiedzi Omara Abida. Zacząłem od tego i musiałem wprowadzić dalsze modyfikacje, aby działało to na moim przykładzie zadanego pytania.

Wykonałem tę pracę z nazwami klas zamiast ID, więc mogłem wywołać ten sam CSS w wielu instancjach. To dało mi możliwość symulowania dwóch komórek o tej samej wielkości. W moim przykładzie ustawiłem rozmiar z ems, aby mógł zachować swój wygląd w różnych rozmiarach tabel i przeglądarek (w moim mobilnym arkuszu CSS mam inną strategię).

Aby wyrównać obraz w lewym div, musiałem utworzyć osobny blok (ostatni w kodzie CSS).

Należy odpowiedzieć na pytanie, w większości przypadków

<div class="BrandContainer"> 
     <div class="BrandContainerTitle"> 
      <h1>...</h1> 
     </div> 
     <div class="BrandContainerImage"> 
      <img alt="Demo image" src="..." /> 
     </div> 
    </div> 

CSS:

.BrandContainer 
{ 
    width: 22em; 
} 
.BrandContainerTitle 
{ 
    vertical-align: top; 
    float: right; 
    width: 10em; 
} 
.BrandContainerImage 
{ 
    vertical-align: top; 
    float: left; 
} 
.BrandContainerImage img 
{ 
    width: 10em; 
}