Question

如何在div元素中显示内联跨度？我希望将它们显示为内联，并自动调整它们的大小和它们所占用的空间，取决于用户的屏幕，并且落后于所有其他div元素。

＆＃13;

body { 

width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
overflow: scroll;

    .whole {
        width: 100%;
        height: 400px;
        display: inline-block;
        margin: 0px 0px 0px 240px;
        z-index: -1;
        position: relative;
    }

    #main { 
        background-color: #212121;
        width: 50%;
        height: 400px;
        display: block;

    }

    #second-main { 
        background-color: #424242;
        width: 50%;
        height: 400px;
        display: block;
    }

    #third-main { 
        background-color: #616161;
        width: 50%;
        height: 400px;
        display: block;
    }

    #fourth-main { 
        background-color: #757575;
        width: 50%;
        height: 400px;
        display: block;
    }

＆＃13;

    <div class = "whole">
                <span id="main">
                    <p></p>
                </span>

                <span id="second-main">
                    <p></p>
                </span>

                <span id="third-main">
                    <p></p>
                </span>

                <span id="fourth-main">
                    <p></p>
                </span>

                <span id="fifth-main">
                    <p></p>
                </span>
    </div>

＆＃13;

Answer 1

默认情况下，

<span>为inline，默认情况下<div>为block。但是在您的CSS中，您使用display: block（#main等）覆盖了这些默认样式。如果您希望它们像屏幕一样调整大小并进行内联调整，那么更好的方法就是使用flexbox：

HTML：

<div class="whole">
  <span id="main">
      <p></p>
  </span>
  <span id="second-main">
      <p></p>
  </span>
  <span id="third-main">
      <p></p>
  </span>
  <span id="fourth-main">
      <p></p>
  </span>
  <span id="fifth-main">
      <p></p>
  </span>
</div>

CSS：

body {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  overflow: scroll;
}

.whole {
  width: 100%;
  height: 400px;
  -ms-display: flexbox;
  display: flex;
  margin: 0px 0px 0px 240px;
}

.whole > span {
  -ms-flex: 1;
  flex: 1;
  height: 100%;
}

#main { 
  background-color: #212121;
}

#second-main { 
  background-color: #424242;
}

#third-main { 
  background-color: #616161;
}

#fourth-main { 
  background-color: #757575;
}

（您还错过了body的结束CSS括号，并且您的font-size: 100%在下一行中被简写font规则覆盖了

这是一个工作小提琴：https://jsfiddle.net/tceqx58x/

Answer 2

要在一行中拟合所有，你需要让它们的宽度可以被总项目整除，所以在你的情况下你需要20％的宽度才能适应5个跨度元素。（当使用百分比时要小心，因为边距会将元素推到实际指定的百分比）

对span元素使用display:inline-block;，并避免在一个条件中指定样式的重复代码。

* {
    margin:0px;
    padding:0px;
}
.whole {
    width: 100%;
    height: 400px;
    z-index: -1;
    position: relative;
}

.whole span {
    display:inline-block;
    width: 20%;
    height: 400px;

}

#main { 
    background-color: #212121;
    background-size: cover;

}

#second-main { 
    background-color: #424242;
    background-size: cover;
}

#third-main { 
    background-color: #616161;
    background-size: cover;
}

#fourth-main { 
    background-color: #757575;
    background-size: cover;
}

#fifth-main { 
    background-color: #dddddd;
    background-size: cover;
}

<div class = "whole">
            <span id="main">
                <p></p>
            </span><span id="second-main">
                <p></p>
            </span><span id="third-main">
                <p></p>
            </span><span id="fourth-main">
                <p></p>
            </span><span id="fifth-main">
                <p></p>
            </span>
</div>

Answer 3

使用display: inline-block代替display: block，并将宽度减少到20％，以适应span元素中全班的所有跨度。

如何在<div>里面显示内联<span>？

3 个答案: