html - float 跨度下的文本

Question

我正在尝试对齐框中的文本。第一篇文章下的第二篇文章。这是我目前所拥有的:

*-----------------------------------------------------------------*
| *------* Floated text                                           |
| |      |                                                        |
| |      |             this text should be under floated text ... |
| *------*                                                        |
*-----------------------------------------------------------------*

如果我不 float 上面的文本(名称)，我就不能在上面使用边距。如果我 float 它，我的底部文本(线程)会像在绘图上一样向右移动。

<div> 
  <span class='name' id='name'>$name</span>
  <br>
  <span class='overflow-ellipsis' id='thread'>$thread</span>
</div>


.name {
    float: left;
    margin-top:8px;
    font-weight: 700;
}

.overflow-ellipsis {
    clear:both;
    padding-top: 12px;
    width:550px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
}

外箱是:

.box {
    top-margin:8px!important;
    width: 720px;
    min-height: 64px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    border: 1px solid #e6e6e6;
    overflow:hidden !important;
    text-overflow: ellipsis!important;
    position: relative;
}

我想让第二个文本位于第一个文本之下，第一个文本的上边距为 8px。

左边的框:

<div class='thumbnail'></div>
.thumbnail {
    margin-top:8px!important;
    margin-left:8px!important;
    margin-right:8px!important;
    border-radius: 8px;
    float: left;
    width: 48px;
    height: 48px;
    border: 1px solid black;
    margin: 0 auto; 
}

JSFIDDLE

Answer 1

分别从 .name 和 overflow-ellipsis 类的样式中删除不必要的 float 和 position: absolute。带有其他小修复的工作演示在下面的代码片段中。

@charset "utf-8";

html {
  background: grey;
}

body {
  text-align: center;
  margin: 0px;
  padding: 0px;
}

.header {
  max-width: 720px;
  min-height: 64px;
  line-height: 64px;
  font-family: "Roboto";
  font-weight: bold;
  text-align: center;
  background: #e6e6e6;
  margin: 0;
  border: 1px solid #e6e6e6;
}

#wrap {
  height: 100vh;
  background: white;
  max-width:721px;
  margin:auto;
  text-align: left;
}
.clearfix:after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  visibility:hidden;
}
.name {
  margin-top:8px;
  font-weight: 700;
}

.overflow-ellipsis {
  padding-top: 8px;
  max-width: 550px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.box {
  margin-top:8px !important;
  max-width: 720px;
  min-height: 64px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  border: 1px solid #e6e6e6;
  overflow:hidden !important;
  text-overflow: ellipsis!important;
  position: relative;
}
.thumbnail {
  margin-top:8px!important;
  margin-left:8px!important;
  margin-right:8px!important;
  border-radius: 8px;
  float: left;
  width: 48px;
  height: 48px;
  border: 1px solid black;
  margin: 0 auto; 
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

<div id="wrap" >
  <div class="header">Some title</div>

  <div id='post' class='box'>
    <div class='thumbnail'></div>
    <div class='name' id='name'>name</div>
    <div class='overflow-ellipsis' id='thread'>thread</div> 
  </div>

</div>