div align sul fondo di un altro div?

ecco il css/html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#chatContainer {
    position: fixed;
    bottom: 20px;
    right: 0;
    vertical-align: bottom;
}
.chat {
    border: 1px solid #999;
    float: right;
    margin: 0 5px;
    height: 200px;
    width: 250px;
    vertical-align: bottom;
    overflow: hidden;
    bottom: 0px;
    transition: 1s;
}
.title {
    padding: 0.5em;
    background-color: blue;
    color: white;
}
.text {
    padding: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 120px;
}
.inputText {
    width: 100%
}
</style>
</head>

<body>
<div id="chatContainer">
  <div class="chat" id="{id}">
    <div class="title"> <span>{title}</span>
      <div style="float:right">
        <input  class="minimize" name="" value="min" type="button">
      </div>
    </div>
    <div class="text"> </div>
    <div class="chatbox">
      <input type="text" class="inputText"  placeholder="enter text" />
    </div>
  </div>
  <div class="chat" id="{id}" style="height:100px">
    <div class="title"> <span>{title}</span>
      <div style="float:right">
        <input  class="minimize" name="" value="min" type="button">
      </div>
    </div>
    <div class="text"> </div>
    <div class="chatbox">
      <input type="text" class="inputText"  placeholder="enter text" />
    </div>
  </div>
</div>
</body>
</html>

Il mio problema è che voglio la chat sarà allineato a fondo
Ecco ora i cattivi risultati che ho ottenuto:
div align sul fondo di un altro div?

Qualche idea di come risolvere ?

(Ho provato vertical-align senza successo)

Ho creato il violino:

http://jsfiddle.net/uwmxT/

(fare clic su min per vedere il bug)

  • fare un violino, così posso aggiornare il codice 🙂 quindi posso venire con una soluzione
  • jsfiddle.net/EXrnB/5 provare questo violino si dovrebbe fare il trucco
  • jsfiddle.net/uwmxT : vedi min per riprodurre il bug
InformationsquelleAutor yarek | 2013-10-16



4 Replies
  1. 0

    In realtà abbastanza semplice, ho appena fatto un violino che mostra un fisso posizionato conversazione

    con un area di immissione in fondo

    ho fatto un innerholder per assicurarsi che funziona in tutti i browser

    Vedere questo violino per vedere il codice

    codice:

    <div class="chat">
      <div class="innerchat">
        <input type="text" class="textbox" placeholder="start chatting" />
      </div>
    </div>
    
    .chat {
      height: 300px;
      width: 200px;
      display: block;
      border: 1px solid #000;
      position:fixed;
      top:20px;
      left:20px;
    }
    .chat .innerchat {
      position:relative;
      height:100%;
      width:100%;    
    }
    .chat .innerchat .textbox {
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      border:none;
      background:#ccc;
      color:#404040;
      height:30px;
      text-indent:6px;
    }

    godere

  2. 0

    impostare la casella di css posizione assoluta e aggiungere il posizionamento di base comandi di stile css

    #id_chat{
        position:absolute;
        bottom:0;
        right:250px; /*width of your very right chat box, + you can add e.g. 10px as margin*/
    }

    http://jsfiddle.net/ueE4b/1/

    • Non male.. il Mio problema è che le chat stanno per essere aggiunti dinamicamente. Così giusto:250px non è abbastanza buono !
    • jsfiddle.net/hanakivan/uwmxT/5 è quello che vuoi? Il tuo errore è stato causato dalla mancata impostazione margin-top diminuendo l’altezza dell’elemento. E la mia risposta è, ovviamente, aggiungere quelle chat tramite JS, quindi perché non calcola la posizione?

Lascia un commento