如何完成Google Keep布局等操作 [英] How to accomplish something like Google Keep layout

问题描述

在Google Keep中，他们有几列（取决于你的视口宽度）宽度相同的笔记，他们安排使它看起来不统一。

？我猜测他们在某些宽度上有特定的断点，并且在考虑填充和边距之后，他们会使图像与所需的宽度匹配，并简单地让图像高度保持相同的宽高比。

这只是我的猜测;它会怎么做？

解决方案

更简单的解决方案可能是使用CSS列属性，这样您可以控制另外，对于我来说，如果不用一堆显式容器就可以达到同样的效果那么你应该。显然有些事情需要考虑流量，可能会为您做出决定。希望这有助于增加上面的答案。

.container { webkit-column-count：3; / * Chrome，Safari，Opera * / -moz-column-count：3; / * Firefox * / column-count：3; -webkit-column-gap：.5rem; / * Chrome，Safari，Opera * / -moz-column-gap：.5rem; / * Firefox * / column-gap：.5rem;}。note {width：calc（100％/ 1）;}

 < div class =container> < img class =notesrc =http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original -original.jpg> < img class =notesrc =http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original -original.jpg> < img class =notesrc =http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original -original.jpg> < img class =notesrc =http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original -original.jpg> < img class =notesrc =http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original -original.jpg> < img class =notesrc =http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original -original.jpg> < img class =notesrc =http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original -original.jpg> < img class =notesrc =http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original -original.jpg> < img class =notesrc =http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original -original.jpg>< / div>  

In Google Keep, they have a couple columns (depending on your viewport width) of equal width notes that they arrange to make it not look uniform.

How can something like this be accomplished? I'm guessing they have specific breakpoints at certain widths, and after accounting for the padding and margins, they make the image match the desired width, and simply let the image height maintain the same aspect ratio.

It's just my guess; how would it be done?

解决方案

A more simplistic solution might be to use the CSS column property, that way you can control the amount of columns in your breakpoints (also gutters).

Additionally it seems all together a good idea to me that if you can achieve the same effect without a bunch of explicit containers then you should. Obviously there are things to consider with flow that might make that decision for you. Hope this helps add to the above answer a bit.

.container {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: .5rem; /* Chrome, Safari, Opera */
  -moz-column-gap: .5rem; /* Firefox */
  column-gap: .5rem;

}
.note {
  width: calc(100% / 1);
}

<div class="container">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg">
</div>

这篇关于如何完成Google Keep布局等操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！