HTML / CSS如何强制图像水平显示

时间：2017-05-02 06:34:01

标签： html css image

下面有一些代码显示6张图片。我想在imagegroup0下水平相邻地显示所有3个图像，然后水平显示imagegroup1的所有图像，但是在imagegroup0的图像下。下面发布的代码有效，除非图像足够大，以便在不滚动的情况下不会显示所有3个图像。当图像太大时，我的浏览器会垂直显示它们。我的问题是：

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

＆＃13;
＆＃13; 
#imagegroup0 div {
  display: inline-block;
}

#imagegroup1 div {
  display: inline-block;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

更新：根据以下反馈，我最终做了什么：

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

4 个答案:

答案 0 :(得分：3)

使用white-space: nowrap并使用类来避免写出每个类。

nowrap表示所有元素都会保持在同一条线上，即使它们没有更多的空间，它们通常会在最近的内置空白区域中断开

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

答案 1 :(得分：0)

您可以为每个div提供width: 30%;。

#imagegroup0 div {
  display: inline-block;
  width: 30%;
}

#imagegroup1 div {
  display: inline-block;
  width: 30%;
}
<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>

答案 2 :(得分：0)

其中一个Posible解决方案是使用“Bootstrap框架”

<html>
<head>
    <title>images</title>
    <style>
#imagegroup0 div
{
display:inline-block;
}
#imagegroup1 div
{
display:inline-block;
}
img
{
 width:133px;
 height:133px;
}

</style>
    </head>
    <body>
    <div id="imagegroup0">
        <div id="image0.0">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image</figcaption>
            </figure>
        </div>
        <div id="image0.1">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image2</figcaption>
            </figure>
        </div>
        <div id="image0.2">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image3</figcaption>
            </figure>
        </div>
    </div>
    <div id="imagegroup1">
        <div id="image1.0">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image</figcaption>
            </figure>
        </div>
        <div id="image1.1">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image2</figcaption>
            </figure>
        </div>
        <div id="image1.2">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image3</figcaption>
            </figure>
        </div>
    </div>
    </body>
</html>

您的问题的答案： 1.即使需要水平滚动，如何强制图像组的图像水平显示？ - 您可以使用bootstrap并使用完全响应的类“table”，它会自动以水平方式显示图像。

2.有没有办法做到这一点，而不必声明图像组显式显示？ - 是的，正如我在回答Q-1时所说，你可以使用bootstrap“table”

<html>
<head>
    <title>images</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
    <style>
#imagegroup0 div
{
display:inline-block;
}
#imagegroup1 div
{
display:inline-block;
}
img
{
 width:333px;
 height:333px;
}

</style>
    </head>
    <body>
    
	<div class="table-responsive">
    <table class="table">
    <tr>
        <td>
          <div id="image0.0">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image1</figcaption>
            </figure>
        </div>
        </td>
        <td>
        <div id="image0.1">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image2</figcaption>
            </figure>
        </div>
        </td>
        <td>
        <div id="image0.2">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image3</figcaption>
            </figure>
        </div>
        </td>
    </tr>
    
    <tr>
        <td>
          <div id="image0.0">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image1</figcaption>
            </figure>
        </div>
        </td>
        <td>
        <div id="image0.1">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image2</figcaption>
            </figure>
        </div>
        </td>
        <td>
        <div id="image0.2">
            <figure>
                <img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
                <figcaption>image3</figcaption>
            </figure>
        </div>
        </td>
    </tr>
    </table>
	</div>
    </body>
</html>

  

您的问题的答案：

1.即使需要水平滚动，如何强制图像组的图像水平显示？

  • 您可以使用bootstrap并使用完全响应的类“table”和“table-responsive”，它会自动以水平方式显示图像，并在需要时为您提供滚动。

2.有没有办法做到这一点，而不必声明图像组显式显示？

  • 是的，正如我在回答Q-1时所说，你可以使用bootstrap“table”

谢谢！

答案 3 :(得分：0)

＆＃13;
＆＃13; 
#imagegroup0, #imagegroup1{
  display: flex;
  text-align: center;
  overflow: auto;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题