Wyrównaj obraz zachowując wysokość

Mam obraz, który chcę być wyrównany do jednej strony elementu div. Mam również paragrafy, które muszą iść w parze z tym obrazem. Jednak nie mają wystarczającej ilości tekstu, aby dotrzeć do końca obrazu. Treść pod akapitami, które mam, musi znajdować się poniżej obrazu.Wyrównaj obraz zachowując wysokość

Używanie dla obrazu nie działa, ponieważ pojemnik div dla obrazu z pożądanymi paragrafami obok nie reaguje na wysokość elementów pływających.

Używanie obrazu position:relative; left:0px również nie działa. W tym celu majstruję z display paragrafów, ale zawsze przechodzą pod obrazem zamiast obok.

h3 {text-align:center} 
 
img {position:relative;left:0px} 
 
p {display:inline-block;}

<body> 
 
<div> 
 
    <div> 
 
     <h3>Header Here</h3> 
 
     <img src="http://www.devtano.com/software/eco/images/console.png"/> 
 
     <p>This paragraph should be next to the image.</p> 
 
     <p>This paragraph should also be next to the image.</p> 
 
    </div> 
 
    <div> 
 
     <h3>Another Header</h3> 
 
     <p>Everything from the above header and down should appear below the image.</p> 
 
    </div> 
 
</div> 
 
</body>

Oto Fiddle.

EDIT

Po przejrzeniu tych odpowiedzi, znalazłem bardziej eleganckie rozwiązanie:

h3 {clear:both; text-align:center} 
img {float:left; margin-right:10px}

Dzieje idei jasnej poprawki i sprawia, że łatwiej-dotyczy.

Źródło

2015-06-22 bcdan

Więc chcesz tylko pierwszy akapit, aby być na lewo od obrazu? – dfsq

Czy możesz wyjaśnić, co chcesz NEXT do obrazu i czego chcesz PONIŻEJ obrazu? –

@JamieBarker Zmieniłem lorem ipsum na opis konkretny. – bcdan

Updated HTML jak w the demo i stosuje te klasy CSS:

h3 {text-align:center; clear:both;} 
img {float:left} 
.inner-wrap p {display:inline;}

Źródło

2015-06-22 14:55:44

Aby uzyskać proste wyrównanie obrazu za pomocą tekstu swobodnego, można użyć align="left w obrazie.

Fiddle here.

Źródło

2015-06-22 14:45:42 dhh

'align' atrybut html jest już przestarzały , sprawdź [tutaj] (http://www.w3.org/TR/html401/present/graphics.html) – dippas

Spróbuj użyć na div kontenera:

display: inline-block;

Albo można unosić wszystkie elementy w lewo:

float: left;

Źródło

2015-06-22 14:50:08

Usuń inline-block (tak oni wywiązać się block) ze swoimi p tagów i następnie umieść ponownie swoje float:left; w swoich tagach . Dodaj także float:left; i clear:left do znacznika div, aby zawsze przepływały jedna pod drugą.

https://jsfiddle.net/bowp6aea/3/

div {float:left;clear:left;} 
 
h3 {text-align:center} 
 
img {float:left;}

<body> 
 
    <div> 
 
     <div> 
 
      <h3>Header Here</h3> 
 
      <img src="http://www.devtano.com/software/eco/images/console.png"/> 
 
      <p> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p> 
 
      <p> 
 
       Vivamus auctor tortor sit amet ipsum volutpat, eu malesuada lorem euismod. Duis nec placerat nibh, vehicula gravida purus. Cras facilisis dictum elit vel gravida. Phasellus egestas eu mi nec cursus. Integer eget dui nibh. Nunc porta in tortor quis ullamcorper. Nulla tristique imperdiet ligula, vel dictum risus scelerisque sit amet. Phasellus elit metus, gravida vitae risus ut, faucibus vulputate mauris. Praesent eget magna sit amet sem bibendum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, ante sit amet elementum auctor, nulla mi iaculis tellus, et mattis nisi purus vitae sem. Vestibulum sit amet quam eget arcu congue commodo sit amet sit amet dui. 
 
      </p> 
 
     </div> 
 
     <div> 
 
      <h3>Another Header</h3> 
 
      <p> 
 
       Phasellus tincidunt enim ex, a dapibus nunc ultricies vitae. Integer interdum enim quis elit gravida auctor. Etiam non ullamcorper orci, eget luctus eros. Quisque posuere neque pretium urna accumsan, ac pellentesque erat dignissim. Maecenas at mi sapien. Proin lacus mauris, imperdiet bibendum orci sed, placerat ornare ipsum. Vivamus luctus quam id orci scelerisque, sed lobortis tellus finibus. Nam et eros sed arcu tristique tempus. 
 
      </p> 
 
     </div> 
 
    </div> 
 
</body>

Źródło

2015-06-22 14:52:34

Nie ma to pożądanego efektu, ponieważ 'div' nie rośnie, aby dopasować się do pływającego obrazu. – bcdan

@ bcdan Co masz na myśli "rosnąć"? Chcesz, aby cały div płynął szerzej niż strona? –

Gdy obraz jest pływający, div jest wysokością akapitów tekstu. Chcę, aby wysokość elementu div obejmowała także cały obraz, a nie tylko tekst. Używam rozwijać w tym sensie. – bcdan

co przy użyciu atrybutu clear:both?wystarczy wstawić prostą <div class="clear"></div> i nadać mu clear:both w CSS

.clear { 
 
    clear: both 
 
} 
 
h3 { 
 
    text-align: center 
 
} 
 
img { 
 
    float: left; 
 
    margin-right: 10px /*demo */ 
 
}

<div> 
 
    <div> 
 
    <h3>Header Here</h3> 
 
    <img src="http://www.devtano.com/software/eco/images/console.png" /> 
 
    <p>This paragraph should be next to the image.</p> 
 
    <p>This paragraph should also be next to the image.</p> 
 
    <div class="clear"></div> 
 
    </div> 
 
    <div> 
 
    <h3>Another Header</h3> 
 
    <p>Everything from the above header and down should appear below the image.</p> 
 
    </div> 
 
</div>

Źródło

2015-06-22 15:09:41 dippas

Wyrównaj obraz zachowując wysokość

Odpowiedz

Powiązane problemy