Question

您好，我是css / bootstrap的新手，我实际上是学习。在这种情况下，我可能需要在＆＃34; chat_funcs＆＃34;添加一些css。 div，但我不知道写什么来得到我想要的东西。

问题：

我想要的是：

到目前为止我的代码：

HTML：

<div id="chat" class="col-md-3 col-xs-12">          
    <span class="titulo">Chat</span>            
    <div class="msg">Mensagem teste</div>
    <div class="msg">Mensagem teste</div>
    <div class="msg">Mensagem teste</div>       
</div>  

<div id="chat_funcs" class="pull-right col-md-3 col-xs-12">
    <div class="pull-left">
        <input class="form-control" type="text">
        <input class="btn btn-default" type="button" value="Enviar">
    </div>
</div>

CSS：

#chat {
  background-color: red ; 
  overflow: scroll; 
  overflow-x: hidden; 
  height: 80%; 
  position: absolute; 
  right: 0; 
  display: inline-block; 
}

Answer 1

为了实现这一目标，您将使用额外的html div容器。还有其他方式，但首先出现在我的脑海中。

这是html标记：

<div id="chat-container" class="col-md-3  col-xs-12">  
    <div class="row">
        <div id="chat" class="col-md-12 col-xs-12">          
            <span class="titulo">Chat</span>            
            <div class="msg">Mensagem teste</div>
            <div class="msg">Mensagem teste</div>
            <div class="msg">Mensagem teste</div>       
        </div>  
    </div>
    <div class="row">
        <div id="chat_funcs" class="col-md-12 col-xs-12">
            <div class="pull-left">
                <input id="message-text" class="form-control" type="text"><br/>
                <input class="btn btn-default" type="button" value="Enviar">
            </div>
        </div> 
    </div>
</div>

这是css：

#chat-container{
    position: absolute;
    right: 0;
    width: 160px;
}

#chat {
  background-color: red ; 
  overflow: scroll; 
  overflow-x: hidden; 
  height: 80%; 
  width: 100%;
  display: inline-block; 
}

#message-text{
    width: 140px;
}

这是一个fiddle

我希望这会有所帮助

BootStrap / CSS修复div的位置

1 个答案: