Question

我正在尝试创建一个看起来像这样的聊天窗口

我正在努力使用右键，我无法将它放在聊天图标和p标签的相同行高中....我想以快速有效的方式做到这一点，我知道我可以简单地将它全部暴露给div并设置边距和大小 - 但我想也许可能有更好的方法。

这是我到目前为止所做的......

<div class="faq_chat">
  <div class="chat_con">
  <i class="fa fa-comments" aria-hidden="true"></i>
  <p>Welcome to some chat system, please</p>
  <br>
  <p>provide your first name or alias to start chat.</p>
  <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p>
 </div>

         .faq_chat {
      padding-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
      height: 400px;
      background-color: #d2f1f0;
      z-index: 99;
      float: left;
    }

    .chat_con {
      float: left;
      line-height: 0.3;
      padding: 18px 14px 16px 21px;
      width: 100%;
      height: 60px;
      background-color: #5d3c95;
      color: white;
      border-bottom: 2px solid white;
    }

    .chat_con p {
      font-size: 10px;
    }

    .chat_con i,
    .chat_con p,
    .chat_con span {
      display: inline;
    }

    .fa-comments {
      font-size: 30px;
      margin-right: 15px;
    }

    .chat_input {
      width: 100%;
      height: 50px;
      background-color: #41c8c2;
      color: white
    }

这是我的Fiddle

Answer 1

利用line-height和float属性

在html中进行的更改

.faq_chat {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  height: 400px;
  background-color: #d2f1f0;
  z-index: 99;
  float: left;
}

.chat_con {
  float: left;
  line-height: 0.3;
  padding: 18px 14px 16px 21px;
  width: 100%;
  height: 60px;
  background-color: #5d3c95;
  color: white;
  border-bottom: 2px solid white;
}

.chat_con p {
  font-size: 10px;
}

.chat_con i,
.chat_con p,
.chat_con span {
  display: inline;
}

.fa-comments {
  font-size: 30px;
  margin-right: 15px;
}

.chat_input {
  width: 100%;
  height: 50px;
  background-color: #41c8c2;
  color: white
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix::after {
  content: "";
  display: table;
  width: 100%;
  clear: both;
}

.left-info {
  position: relative;
  padding-left: 35px;
}

.left-info i.fa-comments {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.left-info p {
  max-width: 60%;
  display: block;
  line-height: 14px;
}

.right-info p {
  line-height: 22px;
}

<div class="faq_chat">
  <div class="chat_con clearfix">
    <div class="float-left">
      <div class="left-info">
        <i class="fa fa-comments" aria-hidden="true"></i>
        <p>Welcome to some chat system, please provide your first name or alias to start chat.</p>
      </div>
    </div>
    <div class="float-right">
      <div class="right-info">
        <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p>
      </div>
    </div>
  </div>
</div>

Link for reference

试试这个..

希望这有助于......

Answer 2

你可以尝试一下

    <div class="faq_chat">
      <div class="chat_con">
         <p>Welcome enter code hereto some chat system, please</p>
         <p>provide your first name or alias to start chat.</p>
         <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p>
      </div>
    </div>


    .faq_chat {
      padding-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
      height: 400px;
      background-color: #d2f1f0;
      z-index: 99;
      float: left;
    }

    .chat_con {
      float: left;
      line-height: 0.3;
      padding: 18px 14px 16px 21px;
      width: 100%;
      height: 80px;
      background-color: #5d3c95;
      color: white;
      border-bottom: 2px solid white;
    }

  .chat_con:before {
      font: normal normal normal 14px/1 FontAwesome;
      content: "\f086";
      font-size: 30px;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      margin-top:-5px;
      margin-right:15px;
      float:left;
    }

    .chat_con p {
      font-size: 10px;
      width:80%;
      float:left;
    }

    .chat_con p:last-child {
      position:absolute;
      right: 45px;
      top: 58px;
      width:50px;
    }

    .chat_con i, .chat_con p, .chat_con span {
      display: inline;
    }

    .fa-comments {
      font-size: 30px;
      margin-right: 15px;
    }

    .chat_input {
      width: 100%;
      height: 50px;
      background-color: #41c8c2;
      color: white
    }

Answer 3

HTML

 <div class="faq_chat">
  <div class="chat_con">
  <div class="msgicon"> 
  <i class="fa fa-comments" aria-hidden="true"></i>
  </div>
  <div class="content">
    <p>Welcome to some chat system, please</p>
    <p>provide your first name or alias to start chat.</p>  
  </div>
  <div class="circle">
      <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p>
  </div>

  </div>
</div>

CSS

  .faq_chat {
      padding-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
      height: 400px;
      background-color: #d2f1f0;
      z-index: 99;
      float: left;
    }

    .chat_con {
      position:relative;
      float: left;
      line-height: 0.3;
      padding: 20px;
      width: 100%;
      height: 60px;
      background-color: #5d3c95;
      color: white;
      border-bottom: 2px solid white;
    }

    .chat_con p {
      font-size: 10px;
    }
    .fa-comments {
      font-size: 30px;
      margin-right: 15px;
      line-height: 0.6;          
    }

    .chat_input {
      width: 100%;
      height: 50px;
      background-color: #41c8c2;
      color: white
    }
    .msgicon{
        display: block;
        float: left;  
    }
    .circle{
        position: absolute;
        right: 15px;
        top: 25px;
    }

Answer 4

我使用flexible box缩短了CSS。

.faq_chat{
  background: #5d4290;
  color: white;
  padding: 10px 0;
}

.chat_con{
  display: flex;
}

.chat_con .fa-comments{
  font-size:30px;
  padding: 5px 10px 0 20px;
}

.chat_con p{
  padding: 0;
  margin: 0;
}

.chat_con .fa-circle{
  color: red;
}

.chat_con .flex-item:last-child {
  margin-left: auto;
  padding: 10px 10px 0 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="faq_chat">
  <div class="chat_con">
  
    <div class="flex-item">
      <i class="fa fa-comments" aria-hidden="true"></i>
    </div>
    
    <div class="flex-item">
      <p>Welcome to some chat system, please</p>
      <p>provide your first name or alias to start chat.</p>
    </div>
    
    <div class="flex-item">
      <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p>
    </div>
    
  </div>
</div>

如何显示fa图标，p标签和跨度内联？

4 个答案: