时间戳

首页 > 解决方案 > 不能让 3 个元素彼此相邻浮动

html - 不能让 3 个元素彼此相邻浮动

问题描述

我遇到了一个小问题，我想将 3 个部分彼此相邻浮动，但由于某些原因（使用引导类 col-md-4），当添加任何边距时，第 3 部分会溢出到下一行，我该如何解决这个？ https: //jsfiddle.net/rpu6szv0/ `

<section id="FirstSection"  class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Chicken</h3>
dummy text


<a href="#Page-Header">Back To top</a>
</section>
<section id="SecondSection" class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Beef</h3>
    dummy text

<a href="#Page-Header">Back To top</a>
</section>

<section id="ThirdSection"  class="col-md-4  col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Sushi</h3>
    dummy text

<a href="#Page-Header">Back To top</a>
</section>
</div>`

缩小 3 个部分

标签： htmlcsstwitter-bootstrap

解决方案

我想浮动 3 个部分并排

一个更先进、更现代的浮动替代品是flexbox。

您可以将flexbox视为具有超能力的浮动。

历史记录： Twitter Bootstrap框架于 2011 年推出，比 CSS Flexbox最终确定早几年。

确实，Bootstrap比 2011 年提供的方法更容易在 CSS 中实现某些布局。

但是，正如维基百科所说：

在 2010 年代，流行的 JavaScript 布局框架（例如Bootstrap）的大量使用激发了 CSS flex-box和网格布局规范。

来源： https ://en.wikipedia.org/wiki/CSS_Flexible_Box_Layout#History

今天，CSS Flexbox（和CSS Grid）比Bootstrap更容易实现这些布局。

在下面的示例中，我有：

  • 给定父母（在这种情况下，body）display: flex
  • 给定孩子（在这种情况下，section）flex: 1 1 33%

第二个属性很关键。

flex是一个简写属性，它表示：

  • 元素可能增长的速率（在这种情况下，1）
  • 元素可能收缩的速率（在这种情况下，1）
  • 初始宽度（在这种情况下，33%）

这意味着，在其他条件相同的情况下，该元素将占用33%可用空间（在本例中为 的宽度body），但如果您添加填充、边框、边距等，该元素可以缩小，以便元素行最终不会占用超过可用空间。

工作示例：

body {
  display: flex;
}

section {
  flex: 1 1 33%;
  text-align: center;
}
<section id="FirstSection">
<h3>Chicken</h3>
<p>dummy text</p>
<p><a href="#Page-Header">Back To Top</a></p>
</section>

<section id="SecondSection">
<h3>Beef</h3>
<p>dummy text</p>
<p><a href="#Page-Header">Back To Top</a></p>
</section>

<section id="ThirdSection">
<h3>Sushi</h3>
<p>dummy text</p>
<p><a href="#Page-Header">Back To Top</a></p>
</section>

推荐阅读