3
respostas

Como posicionar o texto ao redor de um objeto?

Quero que o texto se adapte ao blockquote exatamente como o "saiba mais" da notícia abaixo, porém não estou conseguindo.

Notícia com o exemplo

<head>
    <title>Lorem Ipsum</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="siteSimplesTexto.css">
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<body>

    <main>

        <section class="txt">



            <h1>Lorem Ipsum</h1>

             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum bibendum leo, sed efficitur sem rhoncus vel. Sed efficitur nulla in sagittis rhoncus. Etiam nec elit non elit malesuada faucibus. Aenean ac rhoncus lacus. Praesent ut viverra leo. Nulla cursus, quam sed convallis accumsan, massa magna cursus ipsum, sit amet varius nisl augue sed sapien. Suspendisse mi velit, ultricies at mi vitae, sagittis laoreet velit. Ut sit amet lectus neque.</p>

             <blockquote class="cit">
                    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
                    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
                </blockquote>

            <p>Phasellus non massa in nulla elementum sodales eu sed justo. Fusce erat libero, ultrices vel nisi sed, sagittis imperdiet massa. Mauris vitae maximus nibh. Proin vitae libero eu risus accumsan consectetur. Maecenas a ex lorem. Maecenas eget accumsan tortor. Sed eget nisl sit amet tellus scelerisque facilisis.</p>

            <p>Donec eget elit arcu. Mauris mauris sapien, tempor quis lobortis vel, auctor vitae mi. Nulla imperdiet arcu sit amet augue tincidunt, sit amet efficitur tellus sodales. In vehicula tellus sit amet odio elementum, eget volutpat erat hendrerit. Etiam accumsan arcu a aliquam consectetur. Sed a purus sed lectus pellentesque pulvinar sed id risus. Nunc ligula est, euismod eu mauris sit amet, fringilla fermentum leo. Vivamus condimentum semper hendrerit. Praesent ultrices, erat et pharetra maximus, mauris felis tristique nisl, eget ornare urna ligula sit amet turpis. Maecenas viverra in ex nec ultrices. Nam sit amet consectetur libero. Suspendisse dignissim imperdiet nisi sed ultrices. Sed ligula velit, aliquam non efficitur quis, aliquam eu metus. Suspendisse varius rutrum rhoncus. Mauris laoreet commodo eleifend. Pellentesque vel finibus turpis.</p>

            <p>Donec mattis, felis a condimentum dignissim, ex justo aliquet ligula, in egestas massa nibh bibendum odio. Morbi ullamcorper massa at consequat facilisis. Maecenas sed mattis odio. Fusce at semper felis. Morbi consectetur facilisis sapien, ac euismod justo pulvinar et. Vivamus eu sodales lorem, tristique convallis turpis. Vestibulum ac odio lacinia, hendrerit odio vitae, tempor magna. Quisque commodo finibus lorem, ut efficitur elit faucibus ac. Etiam accumsan nulla nec diam viverra blandit. Etiam semper eros sit amet nibh malesuada consequat. Aenean eu magna mauris.</p>

            <p>Nam nisi magna, fringilla in malesuada sit amet, dignissim eget nisi. Vivamus gravida, nulla sed consequat consectetur, dui mi dictum lectus, at accumsan metus risus sed est. Ut quis molestie nisi. Nam fringilla mollis orci, ac gravida ante commodo a. Quisque viverra elit a augue pulvinar pulvinar. Praesent in mattis enim. Sed quis est id lacus molestie molestie eu vel mi. Maecenas maximus dolor sed nisl pharetra pharetra. Vivamus eleifend id turpis sed hendrerit. In condimentum sem sem, et placerat magna placerat quis. Maecenas et tincidunt massa. Integer non ultricies arcu. Fusce id lobortis dui.</p>

            <p>Maecenas id diam felis. Cras nisl ante, suscipit in tincidunt non, efficitur ut magna. Proin vitae diam hendrerit, ultricies risus sit amet, malesuada libero. Praesent quis porta purus. Morbi elit orci, gravida sed nisi eu, facilisis tempor sapien. Cras non tincidunt magna. Aliquam massa sem, maximus sed pulvinar in, fringilla vitae orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed accumsan tempus lorem non interdum. Mauris laoreet dignissim turpis, nec ornare massa convallis at. Ut eleifend fringilla sapien, ac placerat lacus interdum ut.</p>

            <p>Curabitur convallis mi sed interdum molestie. Pellentesque ullamcorper eu augue eu ullamcorper. Aenean vulputate vitae lectus vitae lacinia. Phasellus pretium turpis quis ullamcorper pellentesque. Nunc vehicula id erat ac vestibulum. Donec tempor, velit eget faucibus gravida, arcu justo luctus eros, a eleifend dolor ex eu elit. Nulla eros tellus, dapibus et porta vulputate, bibendum eu velit. Aliquam ultrices ipsum vitae feugiat suscipit. Duis quis orci sed nibh maximus facilisis. Phasellus ullamcorper ultrices quam, convallis eleifend dui molestie eu.</p>

            <p>Cras rhoncus porttitor justo, sed posuere ipsum blandit ullamcorper. Integer rhoncus metus nec arcu elementum, et pulvinar turpis tempor. Vivamus malesuada tempor molestie. Sed bibendum felis magna, maximus tristique augue consequat suscipit. Duis maximus dictum augue, sit amet porttitor felis. Nulla in consectetur sem. Aenean vitae imperdiet diam. Donec iaculis ut odio volutpat commodo. Suspendisse eget rhoncus nunc. Nunc velit felis, sodales id lorem suscipit, porttitor volutpat purus. Aliquam lorem massa, commodo ac tellus eu, aliquam maximus dui. Fusce efficitur feugiat est, eu tincidunt nulla consequat nec. Etiam vel sem hendrerit, cursus felis sit amet, lacinia nulla. In at consectetur ante. Integer porta leo nisi, ut maximus tortor vestibulum sed. </p>

             <p>Sed ac dolor vel mi auctor scelerisque aliquam sed libero. Fusce sit amet gravida velit. Donec rutrum vestibulum erat, sed porttitor turpis gravida sit amet. Cras vitae feugiat tortor. Quisque lacinia leo sit amet risus placerat, convallis ultricies purus aliquet. Aliquam arcu odio, rutrum id hendrerit eu, gravida a orci. Pellentesque at mollis velit. Suspendisse id volutpat odio. Suspendisse enim velit, blandit ut dolor et, blandit iaculis ligula. Suspendisse nec eros aliquet ligula mattis facilisis sit amet quis diam. Aenean ut risus arcu.</p>

            <p>Curabitur auctor eros est, sed dictum sem sodales eget. Curabitur sed tellus rutrum, tincidunt justo eu, laoreet diam. Nam pretium dictum luctus. Proin at ultricies velit. Suspendisse sed eleifend erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed vel lorem lobortis, volutpat ligula sit amet, euismod eros. Aenean sed tortor quis dui pellentesque feugiat. Suspendisse potenti.</p>

            <p>Nam sollicitudin tellus id tellus tincidunt sollicitudin. Aenean consequat nisl lorem, vel rhoncus enim tincidunt at. Sed sagittis arcu in nulla commodo convallis. Vivamus posuere eu magna rutrum ultrices. Nunc eu posuere leo, eget interdum velit. Proin scelerisque scelerisque neque eget volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus ac dui lacinia, convallis ligula id, blandit sapien. Pellentesque vel pretium lectus, in interdum nisl. Morbi ut lacus dictum, tempus sem eget, vehicula est. Cras quis nisi facilisis, hendrerit sapien eget, interdum odio. Ut massa nisi, cursus vel purus id, vulputate mattis odio. Suspendisse id nunc viverra, rhoncus erat in, laoreet quam. Suspendisse cursus rutrum augue, a porta purus ornare quis. Mauris malesuada dictum vestibulum. Suspendisse pellentesque semper ante non tempor.</p>

            <p>In varius felis magna. In sed metus id mi aliquam sagittis. Maecenas placerat tellus ut pharetra ornare. Pellentesque venenatis condimentum urna. Donec a tellus sit amet erat ultricies varius. Nam eget sapien ut odio hendrerit hendrerit. Cras mollis a nisl eu volutpat. Nullam eget maximus massa. Mauris faucibus nunc at ex porttitor, placerat faucibus ex mollis. Quisque faucibus sit amet enim quis fermentum. Fusce maximus, risus sed rhoncus sollicitudin, justo erat pharetra leo, sit amet iaculis ante magna nec sapien. Sed pharetra elementum nisl lacinia gravida. </p>
        </section>    
    </main>
body{
    font-family: 'Oswald', sans-serif;
}

h1{

    font-weight: 700;
    text-align: center;
    font-size: 4em;
}

.txt{
    font-weight: 300;
    position: absolute;
    width: 60%;
    margin-left: 20%;    
    text-align: justify;

}

.cit{
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    font-size: 1.4em;
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 1%;
    width: 250px;    
}
3 respostas

3 dias de vácuo lol

Olá Misael, desculpe mas não consegui entender o "se adapte", explique melhor para que eu possa lhe ajudar.

Misael, boa noite!ét

É bem simples. Adicione a propriedade "float: left", dentro da class ".cit", ficando assim:

.cit{
     font-family: 'Amatic SC', cursive;
        font-weight: 700;
        font-size: 1.4em;
        background-color: #2c3e50;
        color: #ecf0f1;
        padding: 1%;
        width: 250px;    
        float: left;
}

Espero ter ajudado! Abraço amigo!