Question

我想创建一个像this这样的布局，重点放在“帖子” - 盒子上。如你所见，有三种不同的类型 - 大型，中型和小型我想要创建的规则是：

1。）“大”占宽度的100％ 2.）“中”占宽度的60％左右，总是显示在左侧 3.）“小”占宽度的约40％（考虑边际），总是显示在左侧
4.）如果屏幕尺寸低于阈值（例如800px）或移动设备，则所有3应显示为100％且低于其他。

这是我到目前为止所得到的

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container div {
  padding: 20px;
  border: 1px solid black;
  margin: 10px; 
}

.large, .medium, .small {
  box-shadow: 1px 1px 12px black;
}

.large {
  width: 100%;
}

.medium {
  min-width: 60%;
  flex: 1 1 0
}

.small {
  flex: 1 1 0;
  min-width: 20%;
}

<div class="container">
   <div class="large">Div 1</div>
    <div class="medium">Div 2</div>
    <div class="small">Div 3</div>    
    <div class="medium">Div 2</div>
    <div class="small">Div 3</div>  
</div>

问题是，div是动态添加的（Wordpress）。因此，如果我想保持这种模式，我要注意我创建一个“中”div，就在“小”div之前，然后再创建一个“中等”div。如果我在彼此之后添加两个“小”div，它就不起作用另一个问题是，同一行中两个div的高度相互依赖。例如。如果我将一堆文本放入“Div 3”并且只将一个句子放入“Div 2”中，它们将是相同的高度。

所以我的问题是，是否有更好的方法（最好没有JS）来制作像我的设计草图这样的东西？

以特定模式排列不同大小的div

0 个答案: