Question

关注this question of mine后，我的目标是让值time的{{1}}元素在带蓝色边框的元素的左边框附近右对齐。

Answer 1

要严格实现目标，您需要将此CSS添加到您的目标：

.message_info {
  flex-grow: 1;
}
.message_preview_heading {
  justify-content: space-between;
}

通常，您应该编写CSS（或其他任何类型的代码），尝试使用所需的最少代码量来实现您的目标。此外，在CSS中，您希望使用最弱的选择器，以便以后能够轻松维护和调整代码。

目前，您的大多数选择者都过度合格（太具体）。您不需要元素的所有级别上的类。通常，某个模块顶层的特定类足以对其进行样式化。

希望它能帮助您更好地理解上面概述的一般原则，我按照最佳实践重建您的布局（就像我对客户一样）。以下是我为此布局编写的代码：https://jsfiddle.net/websiter/97cs3uub/（注意它在SCSS中，允许更短的语法和嵌套）。

这将是在解析和前缀之后部署在生产上的最终结果（为了便于阅读而跳过缩小）：

.dialog_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 490px;
  padding: 10px;
  background-color: white;
  font-family: sans-serif;
  -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
     -moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
          box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12); }
  .dialog_list > .photo {
    width: 45px;
    height: 55px;
    background-color: #eee;
    border: 1px solid #ddd;
    margin-right: 10px; }
    .dialog_list > .photo > img {
      -o-object-fit: contain;
         object-fit: contain; }
  .dialog_list > .message {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
       -moz-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }
    .dialog_list > .message > .header {
      font-size: .9rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
         -moz-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-bottom: 10px; }
    .dialog_list > .message > .body {
      font-family: serif;
      font-style: italic; }

body {
  background-color: #f5f5f5; }

<div class="dialog_list">
  <div class="photo">
   <!-- place the <img> here -->
  </div>
  <div class="message">
    <div class="header">
      <span class="number">+7 916 1770000</span>
      <span class="time">2017-01-01 21:10</span>
    </div>
    <div class="body">
    Hello, Sam. Are you ok?   
    </div>
  </div>
</div>

CSS - 嵌入div的水平对齐

1 个答案: