Rozważ następujący kod :
#wrapper {
width: 500px;
border: 1px solid black;
}
#first {
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
}
<div id="wrapper">
<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
<div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Chciałbym, aby dwa div były obok siebie wewnątrz div otoki. W takim przypadku wysokość zielonego div powinna określać wysokość opakowania.
Jak mogę to osiągnąć za pomocą CSS?
#wrapper { display: flex; }
Odpowiedzi:
Unieś jeden lub oba wewnętrzne divy.
Pływający jeden div:
lub jeśli umieścisz oba elementy, musisz zachęcić div otoki, aby zawierał oba elementy pływające, albo pomyśli, że jest pusty i nie będzie otaczał ich ramką
Pływające oba div:
źródło
overflow:auto
na #wrapper, aby rozmiar nadal dostosowywał się do rozmiaru zawartości. (Bez potrzeby wyraźnego: oba elementy)overflow: hidden
robi tu świetną robotę! Jednak wciąż jest to dla mnie magia. Pomyślałem, że tooverflow: hidden
powinno ukryć zawartość, jeśli nie pasuje do pojemnika. Ale tutaj zachowanie jest nieco inne. Czy mógłbyś rozwinąć tę kwestię?overflow
właściwość wyczyści ruchy zarówno pionowe, jak i poziome, dlatego w moim pierwszym przykładzie#second
nie potrzebuje lewego marginesu, właściwość przepełnienia działa tak długo, jak długo jej wartość nie jestvisible
. Wolę ukryć niż auto dla tych scenariuszy na wypadek, gdyby tak było pasek przewijania nie jest generowany przez przypadek (co zrobi auto) .. w obu przypadkach nie będzie ukrytej treści w takim scenariuszu, ponieważ będzie on ukryty tylko wtedy, gdy wyjdzie poza szerokość 500 pikseli, ale o ile nie będzie zawartości wysokości owinąć w szerokość jak zwykle .. bez ukrywania;)Posiadanie dwóch div,
możesz również skorzystać z
display
właściwości:Przykład jsFiddle tutaj .
Jeśli
div1
przekroczy określoną wysokość,div2
zostanie umieszczony obokdiv1
na dole. Aby rozwiązać ten problem, użyjvertical-align:top;
nadiv2
.Przykład jsFiddle tutaj .
źródło
div
są tworzone,inline
nie musisz między nimi wstawiać spacji, nowych wierszy itp. W kodzie HTML. W przeciwnym razie przeglądarki wyświetlą między nimi spację. Zobacz ten Fiddle : nie możesz utrzymać obudiv
s na tej samej linii, chyba że umieścisz ich tagi bez niczego pomiędzy nimi.Możesz umieszczać elementy obok siebie za pomocą właściwości float CSS:
Musisz upewnić się, że div otoki pozwala na przestawianie pod względem szerokości, a marginesy itp. Są ustawione poprawnie.
źródło
Spróbuj użyć modelu Flexbox. Pisanie jest łatwe i krótkie.
Live Jsfiddle
CSS:
domyślnym kierunkiem jest rząd. Tak więc wyrównuje się obok siebie w #wrapper. Ale nie jest obsługiwany IE9 lub mniej niż te wersje
źródło
flex
. Dziękuję Ci!oto rozwiązanie:
Twoje demo zaktualizowane;
http://jsfiddle.net/dqC8t/1/
źródło
overflow: auto;
to nadal działa. Czy możesz podać przykład, w którym jest to wymagane?margin: 0 0 0 302px;
ponieważ to zależywidth: 300px;
. Ale i tak dzięki!!opcja 1
Użyj
float:left
na obudiv
elementach i ustaw% szerokości dla obu elementów div o łącznej szerokości 100%.Użyj
box-sizing: border-box;
na pływających elementach div. Wartość border-box wymusza wypełnienie i obramowanie na szerokość i wysokość zamiast go rozszerzać.Użyj clearfix na,
<div id="wrapper">
aby usunąć pływające elementy potomne, które sprawią, że otoki otoki będą skalowane do właściwej wysokości.http://jsfiddle.net/dqC8t/3381/
Opcja 2
Użyj
position:absolute
na jednym elemencie i stałej szerokości na drugim elemencie.Dodaj pozycję: względem
<div id="wrapper">
elementu, aby elementy potomne były absolutnie pozycjonowane względem<div id="wrapper">
elementu.http://jsfiddle.net/dqC8t/3382/
Opcja 3
Użyj
display:inline-block
na obudiv
elementach i ustaw% szerokości dla obu elementów div o łącznej szerokości 100%.I znowu (tak jak w
float:left
przykładzie) użyjbox-sizing: border-box;
na elementach div. Wartość border-box wymusza wypełnienie i obramowanie na szerokość i wysokość zamiast go rozszerzać.UWAGA: w elementach bloku wbudowanego mogą występować problemy z odstępami, ponieważ wpływ na to mają spacje w znacznikach HTML. Więcej informacji tutaj: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
http://jsfiddle.net/dqC8t/3383/
Ostatnią opcją byłoby użycie nowej opcji wyświetlania o nazwie flex, ale należy pamiętać, że do gry może wejść kompatybilność przeglądarki:
http://caniuse.com/#feat=flexbox
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
źródło
float
nie pływaj na mojej łodzi.inline-block
skały (Przepraszam.)Spróbuj użyć poniższych zmian kodu, aby umieścić dwa divy przed sobą
Łącze JSFiddle
źródło
To bardzo proste - możesz to zrobić na własnej skórze
lub w prosty sposób
Istnieje również milion innych sposobów.
Ale po prostu w prosty sposób. Chciałbym również powiedzieć, że wiele odpowiedzi tutaj jest niepoprawnych, ale oba sposoby, które pokazałem, działają przynajmniej w HTML 5.
źródło
To jest właściwa odpowiedź CSS3. Mam nadzieję, że pomoże Ci to jakoś teraz: D Naprawdę polecam przeczytanie książki: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Właściwie to stworzyłem to rozwiązanie, czytając teraz tę książkę . :RE
źródło
Dodaj
float:left;
właściwość w obu divach.Dodaj
display:inline-block;
nieruchomość.Dodaj
display:flex;
właściwość w div div.źródło
Moje podejście:
CSS:
źródło
źródło
W materiałowym interfejsie użytkownika i reag.js możesz użyć siatki
źródło