Lato destro align senza galleggiante

Ho un widget chat che sto aggiungendo alcuni styling. Tuttavia, sto avendo difficoltà a fare l ‘ “utente” chat bolle di allineare a destra dello schermo.

Quando uso float a destra, con float a sinistra(per lato) il div non è più correttamente, in quanto sembrano andare solo a destra della relativa div.

Mi piacerebbe anche essere in grado di aggiungere div che sarà causare overflow-y per creare una barra di scorrimento. Che senza il galleggiante è già al lavoro come previsto.

Di seguito è la versione corrente in un jsbin.

http://jsbin.com/utulay/1/edit

TLDR; cercando di ottenere il .chat-bolla-utente div per allineare a destra dello schermo senza galleggiante.

InformationsquelleAutor zmanc | 2013-04-29

 

3 Replies
  1. 26

    se non si desidera utilizzare galleggianti, basta provare con inline-block, in questo modo:

    #chatWindow {
       text-align: right;
    }
    
    .chat-bubble-user {
       display: inline-block;
       text-align: left; 
    }

    JsBin (testato su Fx20): http://jsbin.com/awimev/2/edit

    • Abbastanza impressionante. Grazie!
    • inline-block causerà l’elemento da considerare come testo. E così, la spaziatura tra i caratteri, è aggiunto, come se l’intero elemento, era solo testo normale. Questo non è valida se il layout richiede pixel perfetto posizionamento.
  2. 6

    È possibile utilizzare float:right per l’utente messaggi e mettere un clearfix div dopo ciascuno di essi:

    http://jsbin.com/utulay/2/edit

    <div class="chat-bubble-user">
        <div class="chat-bubble-glare-user"></div>
        <p>I have a question about kittens?</p>
        <div class="chat-bubble-arrow-border-user"></div>
        <div class="chat-bubble-arrow-user"></div>
     </div>
    <div class="clearfix"></div>

    CSS

    .clearfix:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }
    .clearfix {
        display: inline-block;
    }
    .clearfix {
        display: block;
    }
    • semplicemente fantastico. mi ha aiutato molto
  3. 0

    è stato un problema per qualche tempo, finché.
    Devi solo usare

    text-align:right;
    display-inline:block;

    tutti nel genitore membro;

Lascia un commento