Question

我正在为一家面包店创建一个示例网站，并且我有三张可点击的照片，这些照片会转到该网站的其他页面。他们目前都坐在彼此的顶部，我希望他们彼此相邻。我对编码非常陌生，这也是我第一次在堆栈溢出上发表文章，所以让我知道是否需要澄清任何内容或发布更多代码。非常感谢您的帮助。

我尝试过img {flex-direction: row}，并尝试将所有图像包装在div内，并像这样改变伸缩方向。

img {
  width: 170px;
  height: 170px;
  border-radius: 150px;
  border: solid white 3px;
  transition: transform .2s;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}

img:hover {
  transform: scale(1.5);
}

<img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd? 
    ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" alt="cup of coffee">

<div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
  <div class="col-sm-12 thumbnail text-center">
    <img alt="regional park A" class="img-responsive" src="https://images.unsplash.com/photo-1530019163123-f33edadb3833? 
     ixlib=rb- 
     1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
  </div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
  <div class="col-sm-12 thumbnail text-center">
    <img alt="regional park B" class="img-responsive" src="https://images.unsplash.com/photo-1509365465985-25d11c17e812? 
    ixlib=rb- 
    1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80">
  </div>
</div>

我的预期结果是我的照片排成一排，但我的实际结果是我的照片排成一列。

Answer 1

您正在将Flexbox布局定位在没有任何子元素来处理方向的图像元素本身上。默认情况下，列具有block级别的行为，占据整个行。将图像包装在父容器中，然后像这样调整标记：

.container {
  display: flex;
  flex-direction: row;
}

img {
  width: 170px;
  height: 170px;
  border-radius: 150px;
  border: solid white 3px;
  transition: transform .2s;
  margin: 0 auto;
}

img:hover {
  transform: scale(1.5);
}

<div class="container">

  <div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
    <div class="col-sm-12 thumbnail text-center">
      <img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd? 
    ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" alt="cup of coffee">
    </div>
  </div>
  
  <div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
    <div class="col-sm-12 thumbnail text-center">
      <img alt="regional park A" class="img-responsive" src="https://images.unsplash.com/photo-1530019163123-f33edadb3833? 
     ixlib=rb- 
     1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
    </div>
  </div>
  
  <div class="col-xs-12 col-sm-12 col-md-4 featured-gallery">
    <div class="col-sm-12 thumbnail text-center">
      <img alt="regional park B" class="img-responsive" src="https://images.unsplash.com/photo-1509365465985-25d11c17e812? 
    ixlib=rb- 
    1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80">
    </div>
  </div>
  
</div>

Answer 2

您接近！您需要的是一个环绕所有图像的父元素，并且是一个flexbox。然后，为每个img提供一个flex属性，以便flexbox父级知道如何缩放和缩放它们。

您可以在此处查看有关如何设置Flexbox的出色文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox对此也可能有些大材小用，您可以将它们设置为display：inline，它们会并排放置。您可以在这里阅读有关内联vs块元素的更多信息：https://www.w3schools.com/html/html_blocks.asp

Answer 3

您可以尝试以下规则：

    img
    {
        display:flex;
        flex-wrap:wrap;
    }

Answer 4

您似乎正在使用Bootstrap的网格系统。您当前的设计摘要有效，但在技术上不正确，并且在前进时可能会遇到一些问题。

为确保布局能够更正，应该。容器。行 .col

当您在页面上添加更多行的内容时，这将变得很重要。您可以在Bootstraps文档页面上查看常规布局。 https://getbootstrap.com/docs/4.3/layout/grid/

Answer 5

在图像div周围放置一个“行” div

如何改变照片的方向？

5 个答案: