Muszę utworzyć styl DIV kontenera, który zawiera wiele innych DIV. Pyta się, czy te DIV-y nie zawiną się, jeśli rozmiar okna przeglądarki będzie wąski.
Starałem się, aby działało jak poniżej.
<style>
.container
{
min-width: 3000px;
overflow: hidden;
}
.slide
{
float: left;
}
</style>
<div class="container">
<div class="slide">something</div>
<div class="slide">something</div>
<div class="slide">something</div>
<div class="slide">something</div>
</div>
Działa to w większości przypadków. Jednak w niektórych szczególnych przypadkach renderowanie jest nieprawidłowe. Znalazłem zmianę DIV kontenera na szerokość 3000px w RTL IE7; i okazuje się, że jest bałagan.
Czy istnieje inny sposób, aby kontener DIV nie zawijał się?
Odpowiedzi:
Spróbuj użyć
white-space: nowrap;
w stylu kontenera (zamiastoverflow: hidden;
)źródło
Jeśli nie chcę definiować minimalnej szerokości, ponieważ nie znam ilości elementów, jedyną rzeczą, która mi działała, było:
Ale tylko w Chrome i Safari: /
źródło
Poniższe działało dla mnie bez unoszenia się (nieco zmodyfikowałem twój przykład dla efektu wizualnego):
Div mogą być oddzielone spacjami. Jeśli nie chcesz tego, użyj
margin-right: -4px;
zamiastmargin: 5px;
do.slide
(jest brzydki, ale jest to trudne do czynienia z problemem ).źródło
</div><!-- --><div class="slide">
jeśli chcesz usunąć dodatkowe spacje między nimi. Styl bloku wstawianego powoduje, że białe znaki w kodzie są pobierane jako spacje w dokumencie HTML.</div><?php ?><div class="slide">
renders jak</div><div class="slide">
w kodzie źródłowym.dot("body").div(dot.iterate(4, function(i){return dot.div("something something something something").class("slide");})).class("container")
Kombinacja, której potrzebujesz, to
na rodzicu i
na dzieciach
źródło
To działało dla mnie:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
źródło
overflow: hidden
powinien dać ci właściwe zachowanie. Domyślam się, żeRTL
jest to pomieszane, ponieważ maszfloat: left
na sobie enkapsulowanediv
.Oprócz tego błędu masz odpowiednie zachowanie.
źródło
Spróbuj użyć
width: 3000px;
w przypadku IE.źródło
Żadne z powyższych nie działało dla mnie.
W moim przypadku musiałem dodać następujące elementy do utworzonej przeze mnie kontroli użytkownika:
źródło
The
min-width
właściwość nie działa poprawnie w przeglądarce Internet Explorer, która najprawdopodobniej jest przyczyną problemów.Przeczytaj informacje i genialny skrypt, który naprawia wiele problemów z IE CSS .
źródło
możesz użyć
dla twojego pojemnika i dlatego unikaj
overflow: hidden;
. Powinien to zrobić, jeśli użyłeś go tylko do wypaczenia.źródło
źródło
Użyj
display:flex
iwhite-space:nowrap
źródło
<span>
Tag służy do grupowania elementów inline w dokumencie.(źródło)
źródło