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

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%;
}

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

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

已修改 Live Demo

Answer 2

你应该使用许可，clear: both;。清除它们会取消在清除元素之前发生的任何浮动。

假设您正在使用的标记和CSS非常复杂，并且可以根据以下示例进行大大简化。

.message {
  overflow: hidden;
  width: 400px;
  border-radius: 8px;
  padding: 17px;
  color: white;
  margin: 1px;
  font-size: 20px;
  float: left;
  background-color: #38C5E3;
  clear: both;
}
.message.to {
  background-color: gray;
  float: right;
}

<div class="row">

  <div class='message from'>hi , how are you doing ? yeah , so am I</div>
  <div class='message to'>great, you ?</div>
  <div class='message from'>yeah , me too.</div>

</div>

注意事项：

不要复制ID，它们被设计为唯一使用。您目前正在复制messages_area。

即使您刚刚开始使用，也要尽量避免使用内联样式。在头部设置样式块，或者外部样式表最好。

在将来提问时，只需包含复制问题所需的最小标记量，这将确保人们可以轻松识别问题，而不是筛选不相关的代码行。在发布之前检查您的代码，您发布的示例错误地嵌套了标记。