Question

对所有人来说，这是美好的一天。我想请求一些关于如何使跨度低于彼此的帮助。

＆＃13;

div{
display:table;
margin:0 auto;
border:1px solid red;
padding:10px;
height:400px;
}
span{
display:table-cell;
border:1px solid blue;
vertical-align:middle;
text-align:center;
}

＆＃13;

<div>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
</div>

＆＃13;

正如你们在片段中看到的那样，他们是并排的。

那么我怎样才能使每个跨度彼此低于下方。

如果你们有替代解决方案，他们在垂直和水平对齐时彼此在一起，我很乐意尝试..

Answer 1

您可以将display:table-cell;更改为display:block;并添加填充，如下所示：

div{
display:table;
margin:0 auto;
border:1px solid red;
padding:10px;
height:400px;
}
span{
display:block;
padding: 100px;
border:1px solid blue;
vertical-align:middle;
text-align:center;
}

<div>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
</div>

Answer 2

＆＃13;

<style>
div{
display:table;
margin:0 auto;
border:1px solid red;
padding:10px;
height:400px;
}
span {
    display: table-cell;
    border: 1px solid blue;
    vertical-align: middle;
    text-align: center;
    clear: both;
    float: right;
    padding: 50px;
}
</style>

＆＃13;

<div>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
</div>

＆＃13;

尝试添加

span {
    display: table-cell;
    border: 1px solid blue;
    vertical-align: middle;
    text-align: center;
    clear: both;
    float: right;
    padding: 50px;
}

如何将彼此并排放入下方

2 个答案: