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

问题描述

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

我已经尝试过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>

我的预期结果是我的照片在一行中并排放置，但我的实际结果是我的照片在一列中并排放置。

标签： htmlcssflexbox

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

问题描述

解决方案

推荐阅读