Jak ustawić znaczniki <img> poziomo w obszarze div?

Potrzebuję, aby obrazy pokazywały się poziomo w obszarze div. Jak mogę to zrobić?Jak ustawić znaczniki <img> poziomo w obszarze div?

HTML:

<div class="Wrapper"> 
    <img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" /> 
    <img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" /> 
    <img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" /> 
</div>

referencyjny: jsFiddle

Źródło

2012-07-03 justcode

pokazać nam HTML jak w pierwszej kolejności dopasowujesz to IMG. – Starx

Zacznij od podania nam dodatkowych informacji ... HTML, może jsfiddle.net, aby dać nam pojęcie o tym, co już wypróbowałeś – freefaller

Zaktualizuj część html w swoim kodzie, aby inni mogli lepiej odpowiedzieć. – Starx

Można również użyć właściwości CSS display: inline-block lub pływaka: lewy do osiągnięcia tego celu.

HTML kod

<div> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div>

kod CSS

div img{ display: inline-block;}

lub

div img{ display: block;float: left;margin-right: 5px;}

Źródło

2012-07-03 10:57:01 Ravi

Używając podanego znacznika, tylko dwa pierwsze obrazy wyrównują horizontslly ... Czy masz jakieś sugestie? – justcode

Spróbuj zwiększyć szerokość kontenera, w którym się znajdują. Prawdopodobnie nie pasują, więc przerywają na inną linię. – menislici

niesamowite! ... działa ... dzięki – justcode

teraz można stosować do

linku domyślnej jest http://tinkerbin.com/ob9HFOA4

Css

img{ 
    display: inline-block; 
    vertical-align: top; 
    }

żywo demo http://tinkerbin.com/a5BxIZrs

Źródło

2012-07-03 10:47:59

Co to ma być? – Starx

Myślę, że powinieneś to zrobić http://tinkerbin.com/pakIgNQQ –

W ogólnym założeniu swojego kodu jest coś takiego

<div> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div>

Następnie prosty właściwość CSS będzie to zadanie.

div img { display: inline; }

Widząc swoją część HTML. Możesz użyć następujących plików CSS, aby uzyskać je online.

.partners img { display: inline; }

Źródło

2012-07-03 10:48:39 Starx

Zamiast używać inline, który pozbawia cię dużo kontroli, które pochodzi z block elementów lub zmiany ich pionowe wyrównanie, to bym je unosić:

<html> 
    <head> 
     <style> 
      div.img_holder img 
      { 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <div class = "img_holder"> 
      <img src="" /> 
      <img src="" /> 
      <img src="" /> 
      <img src="" /> 
     </div> 
    </body> 
</html>

Pływające jest swoistą sama nauka w CSS; warto się tego nauczyć, ponieważ może przynieść bardzo silne rezultaty. Na przykład, gdyby te divs, a nie obrazy, użycie inline uniemożliwiłoby Ci ustawienie ich wysokości. Inline ma również wpływ na działanie margins i padding. vertical-align jest niespójna między przeglądarkami i, jeśli się nie mylę, nie powinna w rzeczywistości przynieść oczekiwanych wyników.

Źródło

2012-07-03 10:55:03

Użyłem właściwości float i tylko 2 zdjęcia są wyrównane poziomo .... czy masz jakieś sugestie? – justcode

Pływaki będą zachowywać się trochę jak elementy śródliniowe, ponieważ będą się zawijać, jeśli ich rodzic nie jest wystarczająco duży. Ustawienie szerokości rodziców (w moim przykładzie, 'img_holder') na odpowiednią wartość powinno pomóc. Jeśli nie, możesz podać zrzut ekranu? Twoje obrazy mają szerokość co najmniej 95 pikseli (zgodnie z powyższym), czy mają również marginesy lub marginesy? –

Kokietuje wszystkim, aby nie zepsuć swoje inne obrazy pewnie zamiar dodać , zrób to:

.Wrapper img{ float: left; }

Spowoduje to przeniesienie wszystkich obrazów w klasie .Wrapper w lewo. Jeśli wszystkie obrazy znajdujące się w stronę, gdzie zasady te są nazywane css będzie wyrównany do lewej, to zrobić:

.Wrapper img{ float: left; }

EDIT: Dodaj tę regułę .Wrapper

.Wrapper{ width: 100%; }

Źródło

2012-07-03 18:49:19 menislici

Użyłem właściwości float, ale tylko dwa z obrazów wyrównują się poziomo ... – justcode

Jak ustawić znaczniki <img> poziomo w obszarze div?

Odpowiedz

Powiązane problemy