Question

我有一个双列布局，底部对齐的图像和顶部对齐的标题。它可以在不使用任何JavaScript的情况下工作，但我觉得在结构上，文本应该与图像在同一个单元格而不是在下一行。这将允许我在移动设备上创建一个列而不需要任何额外的标记。

我怎样才能实现它？

＆＃13;

/* Global */
*{
  margin:  0;
  padding:  0;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after{
  box-sizing: inherit;
}

html, body{
  width:  100%;
  height:  100%;
  font-family: sans-serif;
}

img{
   display: block;
   width:  100%;
   height:  auto;
}

.left-col{
   width: 66.6%;
   background:  pink;
   padding-right: 30px;
}

.right-col {
   background:  mintcream;
   width: 33.3%;
   padding-left: 30px;
}

/* Site */
.site{
  display: flex;
  flex-flow: row nowrap;
  position: relative;
  width:  90%;
  left:  50%;
  transform:  translateX(-50%);
  border: 1px solid grey;
}

.site .left-col, .site .right-col{
   flex: 1 0 auto;
   display: flex;
   flex-flow: column nowrap;
}

.site .item {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

＆＃13;

  <section class='site'>
      <section class="left-col">
         <section class="item"><img src="http://dazedimg.dazedgroup.netdna-cdn.com/786/azure/dazed-prod/1200/8/1208983.jpg" alt=""></section>
         <section class="item">One line of text</section>
      </section>
      <section class="right-col">
         <section class="item"><img src="http://dazedimg.dazedgroup.netdna-cdn.com/1280/azure/dazed-prod/1200/8/1208984.jpg" alt=""></section>
         <section class="item">Multiple<br>lines <br>of<br>text</section>
      </section>
   </section>

＆＃13;

Answer 1

根据我的理解，当您在移动设备上时，它们应该垂直对齐，而不是将两张图片内联对齐？如果是这样..

您可以使用@media查询。

@media (max-width:760px) {
  .site {
    flex-direction: column;
  }
}

示例:(分辨率降至760px）

https://jsfiddle.net/aje90g9h/

使用flexbox的响应式两列布局

1 个答案: