Question

我想让文章彼此相邻，就像浏览器宽度允许的那样。每篇文章都有固定的宽度。此尝试不起作用，每个跨度需要100％宽度。我想因为跨度内的元素正在制造麻烦，但是如何解决这个问题？

span {
  width: 200px;
}

<span>
 <h2>Article 1</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 2</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 3</h2>
 <p>Content for article 3. Bla bla bla bla bla and some more bla...</p>
</span>

Answer 1

Spans默认是内联元素（不应包含h2和p等块元素;您需要使用

制作块元素

span {
  width: 200px;
  display: block; //Turn into a block element
}

或更好的选择是使用＆lt; div＆gt;而不是跨度，默认情况下已经是一个块元素，更重要的是，它更准确semantically。

以下是the difference between span and div的进一步阅读。

Answer 2

最好的办法是在inline元素

中包含block个元素

最佳选择是使用div block元素，默认情况下，如果您添加一个完全可以正常工作的宽度，则默认为width

div {
  border: 1px solid red;
  /*width:200px*/
}

<div>
  <h2>Article 1</h2>
  <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</div>

默认情况下，跨度是inline元素，您可以在第一个示例中看到该元素不需要width，您需要将其设置为display:inline-block

这是默认演示

span {
  border: 1px solid red;
}

<span>
 <h2>Article 1</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 2</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 3</h2>
 <p>Content for article 3. Bla bla bla bla bla and some more bla...</p>
</span>

span {
  width: 200px;
  display:inline-block;
  border:1px solid red;
}

<span>
 <h2>Article 1</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 2</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 3</h2>
 <p>Content for article 3. Bla bla bla bla bla and some more bla...</p>
</span>

如果您想要inline元素之间的间距，可以使用float，但不要忘记清除float

span {
  width: 200px;
  float: left;
  border: 1px solid red;
}

<span>
 <h2>Article 1</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 2</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 3</h2>
 <p>Content for article 3. Bla bla bla bla bla and some more bla...</p>
</span>

Answer 3

将display: block;添加到您的span类，或者更好地使用div。另请查看w3c学校的这篇文章：HTML Block and Inline Elements

让我的跨度不要100％宽度

3 个答案: