1. 首页
  2. 问题列表
  3. html两个相邻且高度相等的span元素[重复]
提问者：小点点

html两个相邻且高度相等的span元素[重复]


我有一个html代码:

<span class="a">Lorem</span>
<span class="b">Ipsum</span>

使用此CSS:

span.a {
    display: block;
    border: 1px solid #60ddfc;
    width: 40%;
    padding: 1%;
    float: left;
}

span.b {
    display: block;
    border: 1px solid #60ddfc;
    width: 40%;
    padding: 1%;
    float: right;

}

我想让这两条线的长度相等，比如，如果第一条线有多条线，第二条线只有一条，第二条线应该和第一条线一样长


共2个答案

匿名用户

如果我理解正确，您可以为这两者创建一个类，所以class c，在class c中，您赋予所有span标记相同的属性。

c {
    display: block;
    border: 1px solid #60ddfc;
    width: 40%;
    padding: 1%;
    float: right;
}

您的跨度应具有以下类lorem。 这回答了你的问题吗？

匿名用户

我建议使用Flexbox。 这样你也不需要浮动。

null

div {
  display: flex;
}

span.a {
  display: block;
  border: 1px solid #60ddfc;
  width: 40%;
  padding: 1%;
}

span.b {
  display: block;
  border: 1px solid #60ddfc;
  width: 40%;
  padding: 1%;
}
<div>
  <span class="a">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
  <span class="b">Lorem Ipsum</span>
</div>

相关问题