Rozvržení založená na CSS - Rozložení jednoho sloupce - Část 1 - HTML

I'm making a site with two columns. Either of the columns can be larger than the other and they have different backgrounds. My problem in trying to do it with CSS with the clearfix trick, is that colors are right when the color of the underlying wrapper has the color of the shorter column, but when it has the color of the larger column, the design changes visually. Maybe I'm doing it wrong.

I've achieved what I want, but with tables. I've asked a friend that makes websites and he told me that tables shouldn't be used for design and that tables are for cavemen. The funny thing is that he couldn't achieve what I want either.

Well, this is basically my HTML code:

Column 1 content
Column 2 content

This is my CSS:

.column1 { float: left; width: 200px; background-color:red; } .column2 { float: left; width: 390px; height: 1%; background-color:blue; } 

  • I recommend you to read the tutorials here: css.maxdesign.com.au/floatutorial You will get some more background information.

It's a basic question... there are may posts about this out there and many solutions.

Here are a few of them: http://www.ejeliot.com/blog/61

The easiest (not exactly recommended) is to use jQuery.

<script> $('. float_container').equalHeights(); </script>  ?> var13 -> 
  • Opravdu? Použít neoptimalizovaný rámec js pouze pro rozložení dvou sloupců?
  • Díky, odkaz je opravdu užitečný! Věděl jsem, že to byla základní otázka, ale jsem nováček, také nevím, proč mají lidé v těchto případech tolik problémů s tabulkami
  • Zenklys: Co přesně máte na mysli?
  • user502549: tabulky se používají pro tabulkový obsah, nikoli pro rozložení webových stránek. Naučte se CSS, dělejte věci správně.

Přejděte na základní implementaci css. Bude mnohem lepší pro údržbu.

Tabulky jsou pro tabulková data, ne rozvržení. Držte se svého <?php DIVsa CSS pro rozvržení.

Můžete jednoduše použít barevné pozadí (obou sloupců) na float_container (faux sloupce) místo .column1 a .column2. Poté bude vypadat, jako by oba sloupce měly stejnou výšku - výšku nejvyššího sloupce. To je za předpokladu, že oba sloupce mají pevnou šířku.

Barevné pozadí float_container by byl obraz (možná dokonce jen 1px vysoký), který se opakuje svisle a obsahuje barvu každého sloupce.

Pracoval pro vás: Charles Robertson | Chcete nás kontaktovat?