Question

我正在设计＆＃34;投资组合＆＃34;我的网站部分，我很难找到最好的＆＃39; （主观的）拥有一个包含2列的容器的方式，将每列内部的内容居中，类似于this website's＆＃34; web development＆＃34;部分。我尝试过使用flexbox，但是想知道我是否使用最好的方法来实现我想要实现的目标，还是有更好的方法来获得相同的结果？

请在此处查看我当前的代码：http://codepen.io/muygalan/pen/ZOVQgm

See above link for code.

Answer 1

我会说你实际上不必使用flexbox实现这一点，它非常简单。 Here's仅使用float和media query在codepen上的工作示例。我已经假设你想要获得与你提供的网站相同的结果，在移动设备的两个列堆叠在彼此之上，图像始终是第一个;避免使用flexbox的最简单方法是修改你的html标记。

我试图让CSS保持苗条和笔直。

.portfolio{
  max-width: 1020px;
  margin: 0 auto;
  clear: both;
}
.port-col-left,
.port-col-right{
  width: 100%;
  float: left;
  text-align: center;
}
@media screen and (min-width:992px){
  .port-col-left,
  .port-col-right{
    width: 50%;
    float: left;
    text-align: center;
  }
  .portfolio--inverted .port-col-left,
  .portfolio--inverted .port-col-right{
    float: right;
  }
}

有没有更好的方法来对齐容器中的2列？

1 个答案: