内容之间的差距

Question

我正在尝试制作一个新闻网站（孟加拉语）...所以我遇到了麻烦。下面有一张图片

我想填充红色标记区域。我该怎么做？新闻内容的CSS是

Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
    AxVLCPlugin21.playlist.stop()
    AxVLCPlugin21.playlist.items.clear()
    AxVLCPlugin21.playlist.add("http://192.168.1.60:8001/1:0:1:1778:18:6E:DCA0000:0:0:0:")
    AxVLCPlugin21.playlist.play()
End Sub

提前致谢

Answer 1

我建议您为图片和高度添加特定尺寸到新闻栏

 .main-news {
    vertical-align: top;
    margin-top: 0;
    width: 33.1%;
    height: 200px;    // new code
    overflow: hidden; // new code
    overflow: auto;
    word-wrap: break-word;
    border: 1px solid #ccc;
    display: inline-block;
}
.main-news img{// new code
  width: 20px;
  height: 20px;
}

Answer 2

  

Flex也是一个很好的approch看到这个参考，   点击here

OR，

  

你可以给出最小高度而不是高度它可以解决你的问题，   但它需要所有块相同的高度

.main-news {
   vertical-align: top;
   margin-top: 0;
   width: 33.1%;
   min-height: 600px;
   overflow: auto;
   word-wrap: break-word;
   border: 1px solid #ccc;
   display: inline-block;
}

Answer 3

好吧，这个问题似乎很难。我建议先垂直填充内容，然后水平填充。您应该为每列添加相同数量的块。我的意思是这样的：

1 4 7
2 5 8
3 6 9

所以，没有水平空间。但是，由于块不相等，所以总是会有一些垂直的自由空间。这个问题可以通过flexbox justify-content属性在一定程度上解决。最后，我们会得到这样的东西（屏幕越宽越好）：

* {
  box-sizing: border-box;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
}

.subcontainer {
  -webkit-box-flex: 3;
      -ms-flex: 3 1 33.3%;
          flex: 3 1 33.3%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column wrap;
      flex-flow: column wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 0em 0.5em;
}

.item {
  padding: 0.5em 0em;
}

<div class="container">
  <div class="subcontainer">
    <div class="item">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
    <div class="item">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
    <div class="item">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
  </div>
    <div class="subcontainer">
    <div class="item">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
    <div class="item">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
    <div class="item">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
  </div>
    <div class="subcontainer">
    <div class="item">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
    <div class="item">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
  </div>
</div>

它应该在真正的显示器上看起来相当不错，而不是在这个小沙箱空间内。对于移动视口，您始终可以实现相应的样式。

Flexbox的另一种选择可以CSS Grid - 检查一下。另外我建议使块的高度相等，虽然在这种情况下问题自然消失了:)据我所知，这一切都没有诉诸超级hacky，凌乱，JS涉及的方法。也许其他人会提出更好的解决方案。

PS 查看此css grid example。 似乎与您想要实现的目标类似，尽管css网格的support尚未填满。