Question

您好我正在尝试复制此设计：

这三张图片的大小是相同的，我正在使用Twitter Bootstrap，但无法让它们以这种方式对齐。我们的想法是将更大的图像设为6列，然后将另外两列设置为6，但是在彼此的顶部，与较大的图像对齐的高度相同。我有什么想法可以解决这个或我可以使用的任何库吗？

编辑：添加当前代码

if (!"multiline" in [tags]) {
  grok { // parse out your identity field }
  multiline { 
    stream_identity => "%{id}"
    pattern => "." // match anything because we're gathering by id field
    what => "previous"
    periodic_flush => true
    max_age => 5 // however many seconds it takes to get all of your lines together
    add_tags => ["multiline" ]
  }
} else {
  // process multiline event that's been flushed
}

我删除了所有不必要的源路径和文本以保持其可读性

Answer 1

这样的东西？它不使用twitter bootstrap或网格系统，它只是几个简单的浮动。

.large {
    float: left;
    margin-right: 10px;
}
.small {
    float: left;
}
.small img {
    height: 95px;
    display: block;
}
.small img:first-child {
    margin-bottom: 10px;
}

<div class="gallery">
    <img src="http://placehold.it/300x200" class="large" />
    <div class="small">
        <img src="http://placehold.it/300x200" />
        <img src="http://placehold.it/300x200" />
    </div>
</div>

Answer 2

您必须将min-height分配给右侧块以匹配左侧块的高度。例如。 HTML代码。

<div class='col-md-8 block-left'>
</div>
<div class='col-md-4'>
   <div class='row'>
      <div class='col-md-12 block-right-top'></div>
      <div class='col-md-12 block-right-bottom'></div>
   </div>
</div>

CSS

.block-left{
        height:210px;
    }
    .block-right-top{
        min-height:100px;
        margin-bottom:10px;
    }
    .block-right-bottom{
        min-height:100px;
    }

Answer 3

首先：尝试将其置于2个不同的

中

＆＃13;

<div class="row">
     <div class="col-md-8 Height1"> <!--- Left Box---->
      <img src="..."/>
     </div>
      
     <div class="col-md-4"> <!--- Right Box---->
      <div class="col-md-12 Height2">
          <img src="..."/>
      </div>
       
      <div class="col-md-12 Height2">
          <img src="..."/>
      </div> 
     </div>
</div>

＆＃13;

指定col-md-8的高度 - （Height1类）对于Height2等级，Height1必须除以2。

使用float是必要的。 *注意：不添加任何自定义CSS。因此，PLZ不会检查＆＃34;运行代码＆＃34;

中的输出

画廊网格的不同大小的图像

3 个答案: