Question

我正在尝试将文字对齐在一个方框中。第一篇文章下的第二篇文章。这就是我到目前为止所做的：

http://<NODE-IP>:<EXTERNAL-PORT>/

如果我没有浮动上面的文字（名字），我就不能使用它。如果我浮动它，我的底部文本（线程）就像在绘图上一样向右移动。

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

外框是：

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

我希望第一个文本位于第一个文本的第一个8px上。

左侧的方框：

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

JSFIDDLE

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

从position: absolute;移除.overflow-ellipsis并向其添加display: inline-block;：

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

Answer 3

已经给出的替代答案：

只需使用div代替span代码，移除br代码并从position: absolute

中移除.overflow-ellipsis

这里很简单：https://jsfiddle.net/5ynzqtq9/1/

Answer 4

.outer,
.box {
  border: 1px dotted black;
}
.outer {
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  float: left;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

<!-- 
*-----------------------------------------------------------------*
| *------* Floated text                                           |
| |      |                                                        |
| |      |             this text should be under floated text ... |
| *------*                                                        |
*-----------------------------------------------------------------*


 -->


<div class="outer clearfix">

  <div class="box">
  </div>

  <div class="inner">
    <span>Floated text</span>
    <br>
    <span>this text should be under floated text ...</span>
  </div>

</div>

浮动跨度下的文本

4 个答案: