HTML / CSS如何强制图像水平显示 [英] HTML / CSS How do I force images to horizontally display

问题描述

我在下面有一些代码可以显示6张图片。我想在图像组0下水平排列所有3个图像，然后水平排列图像组1的所有图像，但是在图像组0的图像下。下面发布的代码可以工作，除非图像足够大，以至于不是所有3个图像都可以在不滚动的情况下看到。当图像变得太大时，我的浏览器会垂直显示它们。我的问题是：

1.即使需要水平滚动，我如何强制图像组的图像水平显示？
2.是否有办法做到这一点，而不必声明图像组显示？基本上，我想说，在一个地方水平。 （所有图片尺寸相同，对齐无关紧要）。

＃

 < div id =imagegroup0> < div id =image0.0> <图> < img src =example.jpg/> < figcaption>图像< / figcaption> < /数字> < / DIV> < div id =image0.1> <图> < img src =example.jpg/> < figcaption> IMAGE2< / figcaption> < /数字> < / DIV> < div id =image0.2> <图> < img src =example.jpg/> < figcaption>图像3< / figcaption> < /数字> < / div>< / div>< div id =imagegroup1> < div id =image1.0> <图> < img src =example.jpg/> < figcaption>图像< / figcaption> < /数字> < / DIV> < div id =image1.1> <图> < img src =example.jpg/> < figcaption> IMAGE2< / figcaption> < /数字> < / DIV> < div id =image1.2> <图> < img src =example.jpg/> < figcaption>图像3< / figcaption> < /数字> < / div>< / div>  

更新：以下是我根据以下反馈完成的工作：



 < html> 
< head> 
< title>图片< / title> 
< style> 
 .group {
 white-space：nowrap; 
} 
 
 .group div {
 display：inline-block; 
} 
< / style> 
< / head> 
< body> 
< div class =group> 
< div> 
< figure> 
< img src =example.jpg/> 
< figcaption>图片< / figcaption> 
< / figure> 
< / div> 
< div> 
< figure> 
< img src =example.jpg/> 
< figcaption> image2< / figcaption> 
< / figure> 
< / div> 
< div> 
< figure> 
< img src =example.jpg/> 
< figcaption> image3< / figcaption> 
< / figure> 
< / div> 
< / div> 
< div class =group> 
< div> 
< figure> 
< img src =example.jpg/> 
< figcaption>图片< / figcaption> 
< / figure> 
< / div> 
< div> 
< figure> 
< img src =example.jpg/> 
< figcaption> image2< / figcaption> 
< / figure> 
< / div> 
< div> 
< figure> 
< img src =example.jpg/> 
< figcaption> image3< / figcaption> 
< / figure> 
< / div> 
< / div> 
< / body> 
< / html> 
  




解决方案

使用

$ b

nowrap 并且使用类来避免写出每个类。

将保持在同一行，即使没有更多的空间，他们通常会打破最近的仍然在框中的空格

  .group {white-space：nowrap;}。group div {width：50px; height：50px;显示：inline-block;边框：1px纯白色;  < div class = groupid =imagegroup0> < DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< ; / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< ; DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / div>< div>< / div>< div>< / div>< div>< / div>< / div>< div class =groupid =imagegroup1> < DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< ; / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< ; DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< DIV>< / DIV>< / DIV>  

I have some code below that displays 6 images. I want to display all 3 images under imagegroup0 horizontally next to each other and then all images of imagegroup1 horizontally as well, but under the images of imagegroup0. The code posted below works unless the image is large enough so that not all 3 images are visible without scrolling. When the images get too large, my browser displays them vertically. My questions are:

1.How do I force the images of an image group to display horizontally even if it requires horizontal scrolling? 2.Is there a way to do that without having to declare the image groups to display explicitly? Basically, I want to say, under a place horizontally. (All images will be same size so alignment does not matter).

#imagegroup0 div {
  display: inline-block;
}

#imagegroup1 div {
  display: inline-block;
}

<div id="imagegroup0">
  <div id="image0.0">
    <figure>
      <img src="example.jpg" />
      <figcaption>image</figcaption>
    </figure>
  </div>
  <div id="image0.1">
    <figure>
      <img src="example.jpg" />
      <figcaption>image2</figcaption>
    </figure>
  </div>
  <div id="image0.2">
    <figure>
      <img src="example.jpg" />
      <figcaption>image3</figcaption>
    </figure>
  </div>
</div>
<div id="imagegroup1">
  <div id="image1.0">
    <figure>
      <img src="example.jpg" />
      <figcaption>image</figcaption>
    </figure>
  </div>
  <div id="image1.1">
    <figure>
      <img src="example.jpg" />
      <figcaption>image2</figcaption>
    </figure>
  </div>
  <div id="image1.2">
    <figure>
      <img src="example.jpg" />
      <figcaption>image3</figcaption>
    </figure>
  </div>
</div>

Update: Here's what I ended up doing based on feedback below:

<html>
<head>
    <title>images</title>
    <style>
.group {
  white-space: nowrap;
}

.group div {
  display: inline-block;
}
</style>
    </head>
    <body>
    <div class="group">
        <div>
            <figure>
                <img src="example.jpg"/>
                <figcaption>image</figcaption>
            </figure>
        </div>
        <div>
            <figure>
                <img src="example.jpg"/>
                <figcaption>image2</figcaption>
            </figure>
        </div>
        <div>
            <figure>
                <img src="example.jpg"/>
                <figcaption>image3</figcaption>
            </figure>
        </div>
    </div>
    <div class="group">
        <div>
            <figure>
                <img src="example.jpg"/>
                <figcaption>image</figcaption>
            </figure>
        </div>
        <div>
            <figure>
                <img src="example.jpg"/>
                <figcaption>image2</figcaption>
            </figure>
        </div>
        <div>
            <figure>
                <img src="example.jpg"/>
                <figcaption>image3</figcaption>
            </figure>
        </div>
    </div>
    </body>
</html>

解决方案

Use white-space: nowrap and use classes to avoid writing out every class.

nowrap means all elements will stay on same line even if there is no more space for them and they would normally break on closest still in-box white-space

.group {
  white-space: nowrap;
}

.group div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px solid white;
  background-color: red;
}

<div class="group" id="imagegroup0">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="group" id="imagegroup1">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

这篇关于HTML / CSS如何强制图像水平显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！