Przepraszamy za nieco śmieciowy tytuł. Nie mogłem myśleć, jak opisać to lepiej.CSS ustaw szerokość, aby wypełnić% pozostałego obszaru

Próbuję zaimplementować gadżet członków Google Friend Connect na mojej stronie (po prostu wszedł w system i chcę go wprowadzić bez poważnego przeprojektowania, przynajmniej w celu testowania sake).

Mój problem jest następujący:

Mam div kontenera, który ma szerokość 90% na stronie głównej (korpus). Wewnątrz tego pływałem div po prawej stronie i ustawiając jego szerokość na 300px i umieszczając w nim gadżet google. Chciałbym mieć możliwość wypełnienia elementu div w 95% przestrzeni pozostałej po lewej stronie div gadżetu Google.

Nie wiem, czy możliwe jest mieszanie px i% z elementami div i width.

Mam nadzieję, że to ma sens.

Dzięki

Źródło

2008-12-05 Jon

Powiązane http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width –

To jest. Szukasz półpłynnego układu. Zadanie było pierwotnie holy grail of CSS implementation ... Ale jak widać z tego linku (robią 3 kolumny, 2 stałe, ale można je łatwo zmienić), jest to problem długo rozwiązany =)

Źródło

2008-12-05 09:34:41 Oli

Wygląda idealnie. Dziękuję Ci. W weekend będę się z tym bawić. – Jon

+44

Właśnie takie artykuły potwierdzają obawy, że CSS jest daleki od dobrego narzędzia do rozmieszczenia. – s4y

+11

@Szczecinny Jako ktoś, kto robi to [konwertowanie projektów na strony internetowe] jako moje dzieło na chleb i masło, mogę powiedzieć, że jest on o wiele lepszy niż cokolwiek innego, co było wcześniej lub sugerowano od tego czasu. Nie jest doskonały i musisz wiedzieć, jak to działa ... Ale kiedy to zrobisz, to jest proste. – Oli

Zrobiłem szybki eksperymentuj również po przeanalizowaniu wielu potencjalnych rozwiązań w każdym miejscu. Próbowałem zrobić mieszankę płynnych i stałych wierszy i kolumn.

To, co skończyło się z:

http://jsbin.com/hapelawake

Źródło

2015-01-05 04:37:59

-2

Musisz stworzyć algorytm, za pomocą jQuery lub JS, który sprawdza pozostałej przestrzeni i ustawia szerokość „reszta” element dynamicznie, za responsywna kompilacja. Jeśli kompilacja nie odpowiada, można przetestować i ustawić szerokość elementu, wykonując proste obliczenia matematyczne.

Doświadczyliśmy podobnych problemów podczas budowania systemu mediów opartych na sieci reagującej na ciecze.

Źródło

2015-05-09 18:31:30 BasisInteractive

rozwiązanie schematu flexbox

.main { 
 
    display: flex; 
 
    width: 90%; 
 
} 
 
.col1 { 
 
    flex-grow: 1; 
 
} 
 
.col2 { 
 
    width: 300px; 
 
    margin-left: 5%; 
 
}

<div class="main"> 
 
    <div class="col1" style="background: #eee;">Left column</div> 
 
    <div class="col2" style="background: #ccc;">Right column</div> 
 
</div>

Uwaga: Dodaj flex prefiksy dostawców, jeśli wymagane przez supported browsers.

Źródło

2017-07-26 20:12:29

CSS ustaw szerokość, aby wypełnić% pozostałego obszaru

Odpowiedz

rozwiązanie schematu flexbox

Powiązane problemy