• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Tekst pod obrazkiem i obok

Object Storage Arubacloud
0 głosów
1,489 wizyt
pytanie zadane 28 czerwca 2016 w HTML i CSS przez Ziuziek Mądrala (5,140 p.)

Witam mam pytanie jak zrobic zeby tekst przechodzil przy 3 zdjeciu od gory do nowej lini ale pod obrazkiem zeby tekst sie zaczynal

 

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2016-06-28, 16:22:37
    Author     : W53839
*/

.container {
    padding: 10px;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px;
    height: 380px;
    border-radius: 10px;
}

.img1 {
    float: left;
    width: 150px;
}
.akapit1 {
    float: left;
    margin-left: 10px;
    
    width: 750px;
}

.img2 {
    float: right;
      width: 150px;
}

.akapit2 {
    float: left;
    
    width: 750px;
}


.img3 {
    float: left;
      width: 150px;
      
}

.akapit3 {
    width: 750px;
    float: left;
    margin-left: 10px;
    
}

 

 

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="container">

            <div class="img1">
                <img src="1.png" />
            </div>
            
            <div class="akapit1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiu 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiu 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiu 
            </div>
            
            <div style="clear:both;"></div>
<hr>
            <div class="akapit2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiu 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiu 
            </div>
            <div class="img2">
                <img src="1.png" />
            </div>
            
            <div style="clear:both;"></div>
<hr>
            <div class="img3">
                <img src="1.png" />
                
            </div>
            
            <div class="akapit3">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiu 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiu 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiuLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretiu 
            </div>
            
        </div>
    </body>
</html>

 

1 odpowiedź

0 głosów
odpowiedź 28 czerwca 2016 przez Zapffe Użytkownik (880 p.)
Wystarczy, że usuniesz float: left; z akapit3

Podobne pytania

0 głosów
1 odpowiedź 690 wizyt
pytanie zadane 28 grudnia 2017 w HTML i CSS przez Wionek Użytkownik (670 p.)
0 głosów
1 odpowiedź 8,680 wizyt
pytanie zadane 14 marca 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)
0 głosów
3 odpowiedzi 473 wizyt
pytanie zadane 22 września 2018 w HTML i CSS przez Q7V Gaduła (4,250 p.)

92,626 zapytań

141,486 odpowiedzi

319,844 komentarzy

62,009 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...