html - 如何对齐元素但保留保留的空间

Question

我想对齐一个元素但保留它留下的空间。

这里有一些图片可以帮助说明:

正确对齐

对齐错误

演示

@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
 body {
  position: fixed;
  overflow-y: hidden;
  width: 100%;
}
.all {
  width: 100%;
}
.chat_element_parent {
  border-style: solid;
  border-bottom: thick;
  height: 100px;
}
.chat_element_child {}

<div class="container-fluid">
  <div class="row" style="left:0px;">
    <div class="col-xs-12" style="background-color:c3c4d4;border-style:solid;border-botom:thick dotted #ff0000;border-top:none;border-left:none;border-right:none;">
      <text style="color:white;text-align:center;font-size:30px;margin:0 auto;display:block;">
        Chatter
      </text>
    </div>
  </div>
  <div class="row" style="left:0px;">
    <div class="col-xs-12" style="background-color:gray;">
      <button type='button' class='btn btn-primary btn-lg' style="background-color:orange;border-color:orange;">Register</button>
      <button type='button' class='btn btn-primary btn-lg' style="width:200px;margin:-4px;">Start New Chat !</button>
      <button type='button' class='btn btn-error btn-lg' style="position:absolute;right:5;">Group chat</button>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-4" style="background-color:red;padding:0px;">
      <div class="chat_element_parent">
        <div class="chat_element_child">
        </div>
      </div>
    </div>
    <div class="col-xs-8" style="background-color:white;height:500px;position:relative;padding:5px;">
      <div style="overflow-y:scroll;height:400px;border:solid 2px;border-color:gray;">
        <div class='all'>
          <div class='row' id="messages_area" style="background-color:#38C5E3;width:400px;float:left;border-radius:8px;padding:17px;color:white;font-size:20px;margin-left:2px;">hi , how are you doing ? yeah , so am I</div>
        </div>
        <div class='all'>
          <div class='row' id="messages_area" style="background-color:gray;float:right;right:15;width:400px;border-radius:8px;padding:17px;color:white;margin:1px;font-size:20px;">great, you ?</div>
        </div>
        <div class='all'>
          <div class='row' id="messages_area" style="background-color:#38C5E3;float:left;width:400px;border-radius:8px;padding:17px;color:white;margin-left:2px;font-size:20px;">yeah , me too.</div>
        </div>
      </div>
      <div class='row' style="position:fixed;bottom:0;">
        <textarea class="form-control" rows="2" style="position:fixed;bottom:0;padding:0px;font-size:20px;width:200px;"></textarea>
      </div>
    </div>

Answer 1

你可以这样做:

Live Demo

<div class="all"><div class="black"></div></div>

<div class="all"><div class="red"></div></div>

CSS

.black {
    background-color: black;
    height: 30px;
    width: 30px;
}

.red {
    background-color: red;
    height: 30px;
    width: 30px;
    float: right;
}

.all {
    width: 100%;
}

这是太多其他解决方案中的一个

编辑:在查看您的代码后我发现了一些错误，当声明一个类时您需要使用双壳而不是像这样的单壳 class="clasName"我刚刚将 height: 62px ; 添加到类 all 中，这解决了问题

编辑 Live Demo