Dostaję jakieś dziwne spacje między dwoma div mam.Usuń białą przestrzeń między działami
Każdy element div ma właściwość css display: inline-block, a każda ma ustawioną wysokość i szerokość.
Nie mogę znaleźć miejsca, w którym znajduje się biały znak.
Otrzymasz spacje tam, ponieważ masz odstępy pomiędzy nimi div. Białe spacje między elementami śródliniowymi interpretowane są jako przestrzeń.
Masz:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Zmień na:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Jednak jest to zły sposób, aby robić to, co chcesz zrobić.
Powinieneś unieść elementy, jeśli to jest to, co chcesz zrobić.
Czy obojętne chciałoby się wyjaśnić? –
Nie martw się, przywracam równowagę za Ciebie. :) – AlexKempton
co jest nie tak z% szerokości/wysokości? – Pup
unosiły się zarówno z elementów pozostawionych, także z 30% do 40% szerokości wypełniając całą przestrzeń, ale nie jest to konieczne. Należy pamiętać, że "blok wbudowany" nie jest obsługiwany przez IE7, ale można go naprawić za pomocą obejścia.
To oczywiście inna opcja. Choć należy zauważyć, elementy pływające powinny być wyczyszczone. – Purag
Dobrze, ale tak naprawdę nie odpowiada na pytanie OP. To naprawdę komentarz, który powinien raczej dotyczyć pytania niż odpowiedzi. –
Masz całkowitą rację, trochę za tym tęskniłem. – AlexKempton
przenieść te wypowiedzi na tej samej linii:
</div><div id="right_side">
To załatwia sprawę:
<div id="left_side">
...
</div><div id="right_side">
...
</div>
Zauważ, że div z prawej strony rozpoczyna się natychmiast po znaczniku zamykającym div po lewej stronie . Działa to, ponieważ każda przestrzeń między elementami, ponieważ są one teraz w linii, stałaby się przestrzenią w samym układzie. Możesz odzwierciedlić to zachowanie za pomocą dwóch elementów zakresu.
Demo.
Zastosowanie:
float:left;
clear:none;
Zarówno div
Próbowaliśmy pomocą pływaka zamiast "inline bloku", bez żadnych problemów. Właśnie zmienił display: inline-block do:
#left_side {float: left;}
i
#right_side {float: right; margin-right: 10%}
Brak widocznych problemów. Może być źle.
Pływaki i bloki wbudowane (jak również komórki tabeli i elastyczne pola) to zasadniczo różne rzeczy. Wszystkie cztery techniki * mogą być * odpowiednie do poziomego wyrównania przedmiotów, ale mają różne ograniczenia i wady. Teoretycznie flexbox wydaje się być najbardziej uniwersalnym sposobem na czwórkę, ale obsługa przeglądarek w najnowszej wersji spec jest wciąż ograniczona. –
dodać to tylko do CSS
h1 {
padding:0;
margin:0;
}
Przestrzeń pomiędzy div jest tylko ze względu na h1 Marginesy zewnętrzne i wewnętrzne
Jeśli chcesz zachować swój układ kodowania, uniknąć pływaków i zachować każdy div na swój własny linia całkowicie ...
<div id="leftSide">Some content here</div><!-- --><div id="rightSide">Some more content here</div>
Nie wiem dlaczego, ale ja rozwiązany ten problem dodając border: 1px solid red; (w pionie) i float: left; (poziomo) do powiązanej stylu oświadczenie DIV i biało-przestrzeniach usunięte.
Dziękuję chłopaki. –