首页 / 技术问答 / Html问答列表 / 问答详情

Html 如何在 flex 容器中左对齐图像

我试图让图片显示在左边，内容显示在右边.

预期的输出将是:

image on the left

下面我的图片出现在内容上方.我try 了很多关于flex-direction的东西，但就是不能让图像出现在左边.

这是我的简化代码，任何建议都将不胜感激.

<style>html {
  background: #f5f7f8;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 20px 0;
}

.band {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

@media only screen and (min-width: 500px) {
  .band {
    grid-template-columns: 1fr 1fr;
  }
  .item-1 {
    grid-column: 1/ span 2;
  }
  .item-1 h1 {
    font-size: 30px;
  }
}

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}


/* card */

.card {
  min-height: 100%;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #444;
  position: relative;
  top: 0;
  transition: all .1s ease-in;
}

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

.card article {
  padding: 20px;
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
}

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

.card p {
  flex: 1;
  /* make p grow to fill available space*/
  line-height: 1.4;
}


/* typography */

h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}

</style>
<div class="support-grid"></div>

<div class="band">

  <div class="item-4">
    <a href="#" class="card">

      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-5">
    <a href="#" class="card">

      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-6">
    <a href="#" class="card">

      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>

      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-7">
    <a href="#" class="card">


      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>

      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
</div>

推荐答案

将card上的flex-direction: column;改为flex-direction: row;.然后你只需要定义一个width对thumb，因为你用它作为背景图像.所以我把width: 100%;设为thumb.

html {
  background: #f5f7f8;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 20px 0;
}

.band {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

@media only screen and (min-width: 500px) {
  .band {
    grid-template-columns: 1fr 1fr;
  }
  .item-1 {
    grid-column: 1/ span 2;
  }
  .item-1 h1 {
    font-size: 30px;
  }
}

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}


/* card */

.card {
  min-height: 100%;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  flex-flow: row;
  text-decoration: none;
  color: #444;
  position: relative;
  top: 0;
  transition: all .1s ease-in;
}

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

.card article {
  padding: 20px;
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
}

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

.card p {
  flex: 1;
  /* make p grow to fill available space*/
  line-height: 1.4;
}


/* typography */

h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}

.thumb {
  width: 100%;
}
<div class="support-grid"></div>
<div class="band">
  <div class="item-4">
    <a href="#" class="card">
      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-5">
    <a href="#" class="card">
      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-6">
    <a href="#" class="card">
      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-7">
    <a href="#" class="card">
      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
</div>

Html相关问答推荐

如何让QML`Text`元素内的链接在悬停时显示鼠标指针？

如何使我的组织 struct 图的连接线响应？

我应该怎么做才能显示出整个字符串？

如何翻转卡片图像的背面

滚动平滑在笔记本电脑上不起作用，但在Nextjs网站的手机浏览器中起作用

如何在网格中拥有离散的行

禁用的文本区域会丢失换行符

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单？

复制两个

会产生一个空行；复制

元素不会

带标签 css 的 div 内的中心图标

模拟另一个输入值设置表单输入的数值

如何使背景 colored颜色 逐渐渐变成另一种 colored颜色 ？

如何更改 Quarto 中标签crossref-def-title的标题 colored颜色 ？

pull-right 不适用于 bootstrap alert 内的按钮

使用 R 中的 rvest 包获取搜索结果的第一个链接

在身体外部创建 tanget 45° div

如何使用 CSS Flex 设计一个导航栏，其中一组项目左对齐而另一组项目右对齐？

根据百分比用多种 colored颜色 填充SVG路径

如何在锚点可点击的伪元素周围制作空白？

调整窗口大小时试图阻止按钮移动

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630