Usuwanie marginesów na elementach bloków śródliniowych po zawinięciu wierszy

Mam nadzieję, że istnieje sposób na to, aby zrobić to bez JavaScript. Mam dwa elementy wyświetlane z wbudowanym blokiem. Oba mają 200 pikseli szerokości i wysokości, więc obie pojawiają się w tej samej linii, chyba że przeglądarka ma niewielkie rozmiary (lub przeglądarki mobilne). Chcę, żeby między tymi elementami było 50px, więc na drugim elemencie dodałem "margin-left: 50px", co działa dobrze. Gdy rozmiar przeglądarki zostanie zmieniony na rozmiar, w którym oba elementy nie mieszczą się w tej samej linii, drugi element zawija się do następnej linii, co jest tym, co chcę zrobić. Problem polega na tym, że drugi element ma nadal lewy margines 50 pikseli, więc elementy nie wydają się wyśrodkowane. Mogłabym dodać JavaScript, aby wykryć, kiedy wysokość kontenera się zmieni (tj. Element zawinięty do następnej linii) i usunąć lewy margines, ale czy jest jakiś sposób, aby to osiągnąć bez JavaScript?Usuwanie marginesów na elementach bloków śródliniowych po zawinięciu wierszy

Oto mój kod, uproszczone:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <body> 
     <div id="wrapper" style="text-align: center;"> 
      <div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div> 
      <div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div> 
     </div> 
    </body> 
</html>

Fiddle: http://jsfiddle.net/YRshx/

Źródło

2013-06-07 Gavin

Ewentualnie turystyczne http://www.barrelny.com/blog/text-align-justify-and-rwd/ – thefrontender

myślę, że to będzie działać . To całkiem fajna technika. Pozwól, że spróbuję ... – Gavin

Właściwie powinienem zdać sobie sprawę z tego, że to nie zadziała w moim przypadku, ponieważ po owijaniu elementy są wyrównane do lewej, a nie wyśrodkowane.Jednak dzięki temu mogę na pewno korzystać z tej techniki w przyszłości. – Gavin

oparciu o rozwiązania bastianonm, spróbuj tego:

<div id="wrapper" style="text-align: center; margin:0 -25px;"> 
     <div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div> 
     <div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div> 
    </div>

http://jsfiddle.net/YRshx/6/

Źródło

2013-06-07 07:04:27 MaX

To wszystko! Dzięki MaX. Jedyną rzeczą jest to, że musiałem dodać kolejny element div opakowania z przepełnieniem: ukryty, ponieważ margines ujemny tworzył stałe paski przewijania. Oto nowe skrzypce: http://jsfiddle.net/WhnEp/ – Gavin

Cieszę się, że możesz go użyć! – MaX

<div id="wrapper" style="text-align: center;"> 
     <div id="elem1" style="float:left; display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div> 
     <div id="elem2" style="float:left; display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div> 
    </div>

Źródło

2013-06-07 06:33:26

Dzięki, bastianonm. Powinienem był powiedzieć, że chcę uniknąć posiadania marginesu na pierwszym elemencie. Myślisz, że można to osiągnąć bez tego? – Gavin

ok, więc możesz ustawić margines prawy: 50 pikseli na obu blokach –

@Gavin Biorąc pod uwagę, że i tak celujesz w elementy, jaki efekt osiągasz, nie umieszczając marginesu na pierwszym przedmiocie? – thefrontender

Working jsFiddle Demo

Spróbuj dodać margines zarówno w lewo i prawo, a do obu elementów:

<div id="wrapper" style="text-align: center;"> 
    <div id="elem1" style="margin: 0 25px; display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div> 
    <div id="elem2" style="margin: 0 25px; display: inline-block; background-color: #00f; width: 200px; height: 200px;"></div> 
</div>

Jednak w oparciu o rzeczywisty układ ta sztuczka może nie zadziała, lub będzie potrzebować więcej rzeczy.

Źródło

2013-06-07 06:37:40

Wystarczy trzymać pojemnik w div inline inline i unoszą je ...

Code: -

<div id="wrapper" style="text-align: center;"> 
    <div id="outer" style="display: inline-block;"> 
    <div id="elem1" style="float:left; background-color: #f00; width: 200px; height: 200px;"></div> 
    <div id="elem2" style="float:left; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div> 
    </div> 
</div>

Demo: - http://jsfiddle.net/YRshx/2/

Dzięki ...

Źródło

2013-06-07 06:40:05 SaurabhLP

Jsfiddle wydaje się nie robić nic innego niż mój oryginalny kod? – Gavin

Niestety, musisz użyć zapytań o media dla tego ... – SaurabhLP

Ty może zrobić coś podobnego do:

@media screen and (max-width: 453px){ 
    #elem2 { margin-left:0 !important; } 
}

http://jsfiddle.net/YRshx/3/

Źródło

2013-06-07 06:43:15

Ta technika może działać. Nie bardzo lubię trudne kodowanie takiej szerokości, ale może to moja jedyna opcja. Zobaczę, jakie inne odpowiedzi pojawiają się, ale jak dotąd uważam, że jest to najlepsze rozwiązanie. – Gavin

Tu S inne podejście do problemu. Wykorzystuje fakt, że spacje są odrzucane, jeśli znajdują się na początku lub końcu linii. Więc używa spacji do oddzielenia bloków.

Fidlle: http://jsfiddle.net/xKVG3/

<div id="wrapper"> 
    <div><div id="elem1"></div></div> 
    <div><div id="elem2"></div></div> 
</div>

#wrapper { text-align:center; } 

#wrapper > div > div { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    vertical-align:top; 
} 

#elem1 { 
    background-color: #f00; 
} 

#elem2 { 
    background-color: #00f; 
} 

#wrapper > div { 
    display:inline; 
} 

#wrapper > div:after { 
    content: ' '; 
    font-size:12.5em; 
    line-height:0px; 
}

Źródło

2013-06-07 07:13:58 Alohci

Wow, co za niesamowite rozwiązanie. Więc po prostu dodajesz spację po każdym elem, który ma szerokość, ale bez wysokości, więc jeśli się zawiąże, to zasadniczo znika? Czy podążam właściwie? To geniusz ... – Gavin

Czekaj, nieważne. Wyjaśniłeś, jak to działa. Spacje są odrzucane, gdy znajdują się pomiędzy owiniętym elementem liniowym. Teraz rozumiem. Fajny roztwór. – Gavin

Usuwanie marginesów na elementach bloków śródliniowych po zawinięciu wierszy

Odpowiedz

Powiązane problemy