html - 如何改变照片的方向？

Question

我正在为一家面包店创建一个示例网站，我有三张可点击的照片，这些照片将引导至网站上的其他页面。他们目前都坐在彼此之上，我希望他们彼此相邻。我对编码很陌生，这也是我关于堆栈溢出的第一篇文章，所以如果我需要澄清任何内容或发布更多代码，请告诉我。非常感谢您的帮助。

我试过 img {flex-direction: row}，并尝试将我所有的图像包装在一个 div 中并像那样改变 flex-direction。

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>