Question

我有一行有七个小图像和一个标题，我需要水平堆叠，但它们是垂直堆叠的。这就是它的样子 -

我确信这很简单，但我很难过。我正在使用重置和放大器骨架网格。这是相关的代码 -

HTML

<button class="button">Access our old platform</button>

CSS

<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>

Answer 1

您作为标题使用的h4标记是块元素，这意味着它们的宽度默认为100％。此外，你没有任何东西可以将它们与它们所属的图像联系起来/统一起来。

现在常见的方法是使用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>

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足够大）

Answer 3

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

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

这应该都是横向的。您可能需要添加一些填充来分隔项目。

Answer 4

您可以使用div-Tag包装img-和h4-Tags并使其浮动。

<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;
}

不要忘记事后解散。

Answer 5

H4将使他们“堆叠”＃39;垂直。最好将每个图像和标题包含在其自身的块或跨度中，并在该div / span上使用＆＃34;显示：块; float：left;＆＃34;。

Answer 6

基本上h4元素的自动格式为100％，您可以使用浏览器的检测工具轻松检查。

最简单的是放置一个div arround h和img元素

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

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

Answer 7

将图像和标题放在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>

CSS - 垂直而非水平堆叠的元素

7 个答案: