CSS - 元素垂直排列而非水平排列

Question

我有一行七个小图像和一个标题，我需要把它们水平排列，但它们却垂直排列。这是它的样子 - 我相信这很简单，但我却被难住了。我正在使用 reset & skeleton grid。这是相关代码 - HTML

<section id="products">
        <div class="container">
            <div class="row">
                <div class="twelve columns agencyproducts">
                    <h2>WHAT PRODUCT ARE YOU INTERESTED IN?</h2>
                    <img src="images/production.png" alt="Production" style="width:50px;height:50px;">
                    <h4>2K / 4K PRODUCTION</h4>
                    <img src="images/post-production.png" alt="Post-Production" style="width:50px;height:50px;">
                    <h4>POST PRODUCTION</h4>
                    <img src="images/animation.png" alt="Animation" style="width:50px;height:50px;">
                    <h4>2D / 3D ANIMATION</h4>
                    <img src="images/ADHOC.png" alt="ADHOC" style="width:50px;height:50px;">
                    <h4>ADHOC</h4>
                    <img src="images/interactive.png" alt="Interactive" style="width:50px;height:50px;">
                    <h4>INTERACTIVE & PERSONALISED</h4>
                    <img src="images/tv-adverts.png" alt="TV ADVERTS" style="width:50px;height:50px;">
                    <h4>TV ADVERTS</h4>
                    <img src="images/360.png" alt="360 Video and VR" style="width:50px;height:50px;">
                    <h4>360 VIDEO & VIRTUAL REALITY</h4>
                </div>  
            </div>  

CSS

section#products {
    height: 700px;
    max-width: 100%

}

.row {
    height: 350px;
    max-width: 100%;
}

.agencyproducts {
    position: relative;
    display: block;
    text-align: center;

}

.agencyproducts img {

    position: relative;
    line-height: 1;
    top: 50%;

}

.agencyproducts h4 {

    display: block;
    text-align: center;
    font-size: 10px;

}

- Mike.Whitehead

---

"<h2>、<h4> 是块级元素，如果没有在 CSS 中限制宽度，它们将占用整个可用宽度。" - Morpheus

我没有在任何地方看到单个的 display: inline-block / display: inline。 - treyBake

Answer 1

您正在使用作为标题的h4标签是块级元素，这意味着它们的默认宽度为100％。此外，您没有任何与它们所属的图像相关联/统一的内容。

现在通常的方法是使用figure标签来包装图像和文本，并将文本放入该figure标签内的figcaption标签中。然后将text-align:center;和display:inline-block;应用于figure标签，以使图像和文本居中并允许它们相邻出现。

figure {
  text-align: center;
  display: inline-block;
  max-width: 100px;
  vertical-align: top;
  margin:10px;
}

<figure>
  <img src="http://placehold.it/80x80/cac">
  <figcaption>
    This is an image
  </figcaption>
</figure>
<figure>
  <img src="http://placehold.it/80x80/cac">
  <figcaption>
    This is an image with a longer caption
  </figcaption>
</figure>
<figure>
  <img src="http://placehold.it/80x80/cac">
  <figcaption>
    This is an image
  </figcaption>
</figure>

- Johannes

---

我可以在“figure”上设置一些宽度和高度规则吗？目前，文本在一行中运行，并沿着行占用了太多的空间 - 我需要其中一些堆叠起来。 - Mike.Whitehead

当然可以 - 只需添加 max-width。我编辑了我的代码片段，你可以在那里看到结果。我还添加了 vertical-align-top 和比默认值更小的边距。只需尝试不同的 CSS 设置，如 figure、figure img 等。 - Johannes

Answer 2

默认情况下，图片和标题的 display 属性被设置为块级元素，这意味着它们单独占据一行。以前，float 是实现块级元素单行显示的首选方法，但应避免使用它，因为 float 存在一些奇怪的行为。相反，我们现在使用 display: inline-block; 或 display: inline; - 应用于您想要单行显示的元素，它将实现此效果！

只是一个示例（不复制您的代码-只是简单的脚本示例）：

HTML:

<div>
    <img src="one.png" class="inlineImg" />
    <img src="two.png" class="inlineImg" />
    <img src="three.png" class="inlineImg" /> 
</div>

CSS：

.inlineImg {display: inline;}

这将会在同一行上显示图片（前提是div足够大）

- treyBake

Answer 3

H4标签将使它们垂直“堆叠”。最好将每个图像和标题都放在自己的块或span中，然后在该div/span上使用"display:block; float:left;"。

- Gavin Simpson

Answer 4

将图像和标题放入一个div中，并使它们全部向左浮动，如下所示 -

.bullet-point { float: left; }

.clear-float { clear: both; }

<div class="bullet-point">
  <img src="images/production.png" alt="Production">
  <h4>2K / 4K PRODUCTION</h4>
</div>

<div class="bullet-point">
  <img src="images/production.png" alt="Production">
  <h4>2K / 4K PRODUCTION</h4>
</div>
.
.
.and so on
<div class="clear-float"></div>

- Sujan Sundareswaran

Answer 5

.agencyproducts {
    position: relative;
    display: inline-flex;
    text-align: center;
}

你可以将主标题放在行 div 外面

这样它们就都会水平排列了。你可能需要添加一些填充来分隔这些项目。

- user5014677

Answer 6

你可以用 div 标签包裹 img 和 h4 标签，并将其浮动。

<div class="wrapper">
 <img src="images/production.png" alt="Production" style="width:50px;height:50px;">
 <h4>2K / 4K PRODUCTION</h4>
</div>

CSS：

.wrapper {
 float: left;
}

别忘了之后要取消浮动。

- Bernhard

---

我不建议使用 float，因为它在这方面的使用越来越少了 - 可以使用 display: inline 来代替。 - treyBake

Answer 7

基本上，h4元素自动具有100％的宽度，您可以使用浏览器的检查工具轻松检查此功能。

最简单的方法是在h和img元素周围放置一个div。

<div class="containerIcon">
  //img element
  //h element
</div>

.conainterIcon {
  display: block;
  width: 13%, //So they all fit in one line
  float: left;
}

- Doomenik