Czy mogę utworzyć układ dwukolumnowy, który płynnie dostosowuje się do wąskich okien?

Próbuję zaprojektować stronę, która ma dwie kolumny zawartości, div # left i div # right. (Wiem, że nie są to odpowiednie semantyczne identyfikatory, ale ułatwia to wyjaśnienie). Szerokość obu kolumn jest stała.
Desired result - wide viewport
Pożądany wynik - Szeroki rzutniaCzy mogę utworzyć układ dwukolumnowy, który płynnie dostosowuje się do wąskich okien?

Gdy rzutnia jest zbyt wąska, aby wyświetlić zarówno side-by-side, Chcę #right być ułożone na wierzchu #left, tak:
Desired result - narrow viewport
Pożądany wynik - wąski rzutnia

Moja pierwsza myśl była po prostu zastosować float: left do #left i float: right to #right, ale powoduje to, że #right sam dołącza się do z prawej strony okna (co jest właściwym zachowaniem dla float, pozostawiając puste miejsce. To również pozostawia dużą lukę między kolumnami, gdy okno przeglądarki jest naprawdę szerokie.
Opposite floats
Zła - div # prawo nie jest równo z lewej strony widoku

Stosowanie float: left do zarówno div spowodowałoby niewłaściwy jeden ruchomy do dołu, gdy okno było zbyt małe.
Wrong one on top
Zła - div # prawo nie jest na szczycie div # lewo

pewnie mógłby zrobić to z zapytaniami mediów, ale IE nie obsługuje tych, aż do wersji 9. Kolejność źródłem jest nieważna, ale potrzebuję czegoś, co działa w minimum IE7. Czy można to zrobić bez odwoływania się do Javascript?

Źródło

2010-12-30 Brant Bobby

Miałem zamiar zasugerować float: zostawiłem dla obu, ale ponownie przeczytałem twoje wymaganie, aby #right był pierwszy. oops – n8wrl

Pływanie w prawo spowoduje duży odstęp po lewej stronie, gdy ekran jest szeroki, czy to jest problem? – JakeParis

@JMC Creative: Zgadza się. –

ten dostaje całkiem blisko (Zastrzeżenie: I tylko przetestowane w Chrome i Firefox), za pomocą CSS tylko:

<html> 
<head> 
<style type="text/css"> 
div.main1{ width: 40%; 
    min-width:200px; 
    height: 400px; 
    border: solid 1px black; 
    display:inline-block; 
} 
div.main2{ width: 40%; 
    min-width:200px; 
    height: 400px; 
    border: solid 1px black; 
    float:left; 
} 

</style> 
</head> 
<body> 
<div class="main1">right div</div> 
<div class="main2">left div</div> 
</body> 
</html>

Sztuką jest styl wyświetlania w wierszu inline ... Ktoś inny może być w stanie to wykorzystać i zrobić lepiej, ale myślę, że jest blisko.

Aerik

Źródło

2010-12-30 22:24:45 Aerik

wbudowany blok ma pewne błędy podczas używania w IE6/7 i nie działa w ogóle w FF2 – RAMe0

Nie mam żadnej z tych przeglądarek do przetestowania i odpowiedzi zapewnia rozwiązanie mniej javascript dla najnowszych przeglądarek. Ten artykuł wydaje się sugerować, że możliwe jest rozwiązanie IE7: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/, ale robię nie ma IE7, aby go wypróbować. – Aerik

Działa dobrze w IE8, przynajmniej. –

Dodaj kontener zewnętrzny do 2 kolumn, który jest unoszony w lewo, ale bez określonej szerokości.

Sprawdź fiddle.

Źródło

2010-12-30 21:53:16 JakeParis

Cool. Czy istnieje jednak sposób na pozbycie się luki po lewej stronie? –

Myślę, że będziesz musiał użyć JS. Bez tego będziesz miał luki. – RAMe0

Tak, z JS możesz ustawić szerokość zewnętrznego kontenera na szerokość prawej kolumny, gdy rozmiar ekranu zostanie zmieniony poniżej pewnego progu. to wyeliminowałoby przestrzeń po lewej. – Adrian

To nie jest możliwe. Tak działa HTML (lub nie działa: P).

Przynajmniej nie sposób wiem.

Zawsze będziesz miał miejsce po lewej stronie, jak sądzę.

Spróbuję jednak pewnych rzeczy i dam ci znać, jeśli coś znajdę.

Źródło

2010-12-30 21:53:22 PeeHaa

<html> 
<head> 

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 

<script type="text/javascript"> 
    google.load("jquery", "1.4.4"); 
</script> 

<style type="text/css"> 
    /*html body { height:100%; }*/ 

    #left { width: 500px; margin: 0 6px 0 6px; background-color:Blue; } 
    #right { width: 500px; margin: 0 6px 0 6px; background-color: Orange; } 
    #container { width: 1024px; } 
</style> 

<script type="text/javascript"> 

    $(function() { 
     setUpFloats(); 

     $(window).bind("resize", setUpFloats); 
    }); 

    function setUpFloats() { 
     if ($(window).width() <= 1024) { 
      $('#container').css('width', $('#right').width()); 
      $('#container').css('padding-left', '12px'); 
     } else { 
      $('#container').css('width', 1024); 
      $('#container').css('padding', '0'); 
     } 
    } 

</script> 

</head> 

<body> 

<div id="container" style="float:left;"> 
    <div id="right" style="float:right;">right</div> 
    <div id="left" style="float:right;">left</div> 

</div> 

</body> 
</html>

EDIT:

Naprawiłem go więc pomarańczowy (z prawej) jest na górze. Głupio mi się zdezorientowało, jaki obraz miał rację.

EDIT 2

Mocowanie wyściółka

Źródło

2010-12-30 21:56:41 Josh

Czy mogę utworzyć układ dwukolumnowy, który płynnie dostosowuje się do wąskich okien?

Odpowiedz

Powiązane problemy