CSS中的两列渐变定位框
Posted
技术标签:
【中文标题】CSS中的两列渐变定位框【英文标题】：Gradual positioned boxes in CSS in two columns 【发布时间】：2017-12-28 05:23:53 【问题描述】：我正在为菜单构建与此 UI 类似的东西：
我正在寻找一种实现它的好方法。
我在这个项目中使用引导程序。
该容器是引导程序的container-fluid 在其他 DIV 内，它是屏幕宽度的 50%。这就是我使用container-fluid 的原因——因为这不是固定宽度的容器。
我可以使用 bootstrap (3) Grid (col-xx-x) 或任何其他 css 解决方案。
这是我到目前为止所做的，使用float: left
*
box-sizing: border-box;
.container-fluid
margin-top: 75px;
.menu-items
padding: 0;
position: relative;
list-style-type: none;
text-align: center;
.menu-item
display: inline-block;
float: left;
width: 50%;
height: 250px;
.menu-item:nth-child(odd)
margin-top: -65px;
.menu-item:nth-child(even)
margin-top: 95px;
.image-wrapper
display: inline-block;
.image
background-color: gray;
width: 80px;
height: 100px;
<div class="container-fluid">
<ul class="menu-items">
<li class="menu-item">
<div class="image-wrapper">
<div class="image"></div>
</div>
<div class="text-wrapper">
<span>Item 1</span>
</div>
</li>
<li class="menu-item">
<div class="image-wrapper">
<div class="image"></div>
</div>
<div class="text-wrapper">
<span>Item 2</span>
</div>
</li>
<li class="menu-item">
<div class="image-wrapper">
<div class="image"></div>
</div>
<div class="text-wrapper">
<span>Item 3</span>
</div>
</li>
<li class="menu-item">
<div class="image-wrapper">
<div class="image"></div>
</div>
<div class="text-wrapper">
<span>Item 4</span>
</div>
</li>
</ul>
</div>你会如何实现它？
像我一样使用浮点数？ Flex 不是解决向后兼容性问题的选项。 使用引导网格？ 其他方式？
【问题讨论】：
你有 div 的最大高度值还是动态的？ 如果您不想将菜单项拆分为 html 中的单个列 div，那么这可能是处理此问题的最佳方法。 @Ihazkode 所有图像的大小都相同。所有文本都是一行。所以所有项目的高度（和宽度）都相同 jQuery masonry 是否适合您的情况？ @ihzkode 我更喜欢没有其他 3rd 方插件（我已经有这么多）.. 另外，我使用的是 angular，它有自己的生态系统，不能很好地与 jQuery 配合使用，所以如果有任何第 3 方 - 基于角度更可取.. 但我希望有一个自定义解决方案（基于 css） 【参考方案1】：如果您坚持纯 CSS 修复，请使用 floating 和 相对 宽度单位或 %。
这是一个很好的简单结构，不需要大量代码或引导程序。
-
将整个设置包装在
.wrapper div中
然后...将每两个.square 元素包装在一个水平.row 中
然后...使用nth-of-type 选择器进行必要的
根据元素是否调整所需的偏移量
是.row div 中的第一个或第二个.square 元素。
每个.row div 将始终占据整行
.row 中的每个元素都将达到 50%...调整屏幕大小以了解我的意思。
工作示例：
*
box-sizing: border-box
body
background: grey
.wrapper
width: 100%;
margin: 12% auto;
img
display: block;
max-width: 100%;
.square
background: black;
width: 49%;
text-align: center;
display: inline-block;
color:white;
.row
display: block;
width: 80%;
margin:0 auto;
.row .square:nth-of-type(1)
float: left;
.row:not(:nth-of-type(1)) .square:nth-of-type(1)
margin-top: 12%;
.row .square:nth-of-type(2)
margin-top: 12%;
float: right;
<div class="wrapper">
<div class="row">
<div class="square"><img src="http://via.placeholder.com/1000x1000?text=one">Line for element 1</div>
<div class="square"><img src="http://via.placeholder.com/1000x1000?text=two">Line for element 2</div>
</div>
<div class="row">
<div class="square"><img src="http://via.placeholder.com/1000x1000?text=three">Line for element 3</div>
<div class="square"><img src="http://via.placeholder.com/1000x1000?text=four">Line for element 4</div>
</div>
</div>这涵盖了我将如何使用纯 CSS 来实现。
现在，我实际上更愿意这样做。
我会将Masonry 合并/使用到项目中。即使此特定应用程序的使用可能受到限制。它只会让您的设计更加通用。
[...] 一个 javascript 网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像石匠在墙上安装石头。您可能已经在整个 Internet 上看到了它的使用情况。
我知道您说过您希望避免使用外部库，但是...
您可以运行 Masonry without jQuery:
Masonry v3 支持 vanilla JS，无需 jQuery。
鉴于缩小后的库小于 8kb，如下所示：
https://unpkg.com/masonry-layout@4.2.0/dist/masonry.pkgd.min.js
使用它可能是个好主意。
另外，你可以initialize the masonry with html alone.这样：
<div class="grid" data-masonry=' "itemSelector": ".grid-item", "columnWidth": 200 '>
因此，所有这些都结束了，这就是你最终可能得到的结果......
注意：（图片可能加载缓慢）
*
box-sizing: border-box;
body
text-align: center;
background: #131418;
.grid
max-width: 100%;
margin: 0 auto;
width: 95vw;
.grid-item
width: 50%;
background: white;
border: 2px #131418 solid;
.grid-item img
width: 100%;
height: auto;
.grid-item p
font-size: 16px;
padding: 2px 15px;
text-align: justify
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="grid" data-masonry=' "itemSelector": ".grid-item"'>
<div class="grid-item"><img src="//unsplash.it/501/501" />
<p>Lorem ipsum dolor sit amet, et equidem suscipit delicata eos. Simul scribentur delicatissimi te eam. Ius ea ullum dolorum disputando, pri putent definitiones et. Eos odio deleniti euripidis te, mea ex iudico praesent, et vix accusata percipitur. Ei
nec quod lorem constituto. Eius intellegebat ad vis. Erat adipiscing conclusionemque mea at, omnesque cotidieque per ea. Oblique philosophia eos id, vel causae appellantur dissentiunt ad. Utroque corpora his an, suas ullamcorper nam ut. Nec iuvaret
facilisi definiebas ea, ad omnium utamur ius.</p>
</div>
<div class="grid-item"><img src="//unsplash.it/511/511" />
<p>Lorem ipsum dolor sit amet, sit prima oporteat ad, ad ridens tamquam his. Docendi platonem mea te, inani mentitum eum cu, in lorem eripuit debitis eum. Nam ei novum causae cotidieque, placerat similique at per, no his stet ferri animal. An option
omittam invidunt vim. Dico aperiam cum te, his ei dicit civibus praesent, sed no salutandi hendrerit. Eam te inani verterem honestatis, id sit choro utroque pertinax. Sit cibo duis laoreet et, ea adhuc aliquam eum, mea paulo nostrum atomorum eu.
Amet habeo semper ex vix, qui ea quas minimum. His at diam quaestio, ut hinc vocent principes eum. Ius sint movet labitur ea, per ad dignissim efficiendi. Idque assum vix at, diceret bonorum impedit eum ei, eos an duis decore deleniti. Duo dictas
conceptam te.</p>
</div>
<div class="grid-item"><img src="//unsplash.it/522/522" />
<p>Lorem ipsum dolor sit amet, his altera quodsi everti id. Ex error causae vis, ius ad justo simul nostrud, sea veri recteque ei. Sea et semper percipitur. Ad bonorum interpretaris eos, augue novum legendos vis at. At modus viderer sit, congue fuisset
postulant ea quo. Ei probatus definitionem sed, cu nam solum quaestio, ad nec debet equidem facilis. No duo essent nusquam vituperata, at duo veri eligendi temporibus. Nam expetenda eloquentiam ut. Habemus conclusionemque in eum.</p>
</div>
<div class="grid-item"><img src="//unsplash.it/533/533" />
<p>Lorem ipsum dolor sit amet, an tollit ocurreret qui, sit no option eleifend periculis. Quo eu suscipit scaevola consulatu, agam essent vituperata in vim. Qui recteque adversarium et, his ad nisl admodum facilisis. Id sit graeco probatus disputationi.
Blandit ponderum laboramus cu vel. Oblique hendrerit vel ea. Sanctus delenit oportere nec an. Illud equidem voluptaria an ius, cu vidit soleat sit. Vis elit commune ei, qui stet illum repudiare ea. Sint labores neglegentur cu sit, cu alii vocibus
pri. Ad qui tamquam fabulas oportere, nam consetetur consequuntur delicatissimi ea. Nostro pericula tincidunt usu cu.</p>
</div>
<div class="grid-item"><img src="//unsplash.it/544/544" />
<p>Lorem ipsum dolor sit amet, alterum bonorum eum eu, cu ancillae partiendo mei, nec sale quando eloquentiam id. Exerci omittantur eu cum, temporibus repudiandae ad ius. Eos ut diceret alterum, an vix latine reformidans. Has ad tamquam nonumes voluptatibus,
mucius moderatius id sed. Has tota aperiam feugait at, zril assueverit persequeris has cu. Qui ea rebum maluisset. Omittam oporteat qui ei, ius ea tale quot. Eius probatus laboramus ius ut, aeque quaerendum ei mei. Fierent partiendo cotidieque mel
at, vis ridens saperet voluptatum ei, ad etiam tantas referrentur eos. Vidit adhuc ius cu, te dicam quaeque sanctus per. Iriure molestie in pro, per ad eius constituam. Ius aliquip sanctus legendos ex, justo aeque abhorreant quo ex. Vis ea movet
causae /p>
</div>
<div class="grid-item"><img src="//unsplash.it/555/555" />
<p>Lorem ipsum dolor sit amet, tation neglegentur id duo. Ex qui malis moderatius. Nibh efficiantur mea id, qui at porro percipitur. Cum ea mediocrem democritum, te ferri iriure praesent sit, luptatum suscipiantur eam ea. Ex ipsum invenire efficiendi
ius, an qui mucius tractatos. Vix enim dicat simul cu, pri ei prima tempor numquam. Vim te veri dicat. In mel iusto feugait, eum tale expetendis at, ea sea putant accusamus omittantur. Eos illud utamur referrentur ea. An iisque volumus referrentur
sit, cu has dicit delenit ancillae. Quod veritus percipitur cu vix, at nec ullum philosophia.</p>
</div>
<div class="grid-item"><img src="//unsplash.it/566/566" />
<p>Lorem ipsum dolor sit amet, et equidem suscipit delicata eos. Simul scribentur delicatissimi te eam. Ius ea ullum dolorum disputando, pri putent definitiones et. Eos odio deleniti euripidis te, mea ex iudico praesent, et vix accusata percipitur. Ei
nec quod lorem constituto. Eius intellegebat ad vis. Erat adipiscing conclusionemque mea at, omnesque cotidieque per ea. Oblique philosophia eos id, vel causae appellantur dissentiunt ad. Utroque corpora his an, suas ullamcorper nam ut. Nec iuvaret
facilisi definiebas ea, ad omnium utamur ius.</p>
</div>
<div class="grid-item"><img src="//unsplash.it/577/577" />
<p>Lorem ipsum dolor sit amet, sit prima oporteat ad, ad ridens tamquam his. Docendi platonem mea te, inani mentitum eum cu, in lorem eripuit debitis eum. Nam ei novum causae cotidieque, placerat similique at per, no his stet ferri animal. An option
omittam invidunt vim. Dico aperiam cum te, his ei dicit civibus praesent, sed no salutandi hendrerit. Eam te inani verterem honestatis, id sit choro utroque pertinax. Sit cibo duis laoreet et, ea adhuc aliquam eum, mea paulo nostrum atomorum eu.
Amet habeo semper ex vix, qui ea quas minimum. His at diam quaestio, ut hinc vocent principes eum. Ius sint movet labitur ea, per ad dignissim efficiendi. Idque assum vix at, diceret bonorum impedit eum ei, eos an duis decore deleniti. Duo dictas
conceptam te.</p>
</div>
<div class="grid-item"><img src="//unsplash.it/588/588" />
<p>dum suavitate argumentum, an qui facer facete, persius veritus molestiae cum cu. Mei vitae consequat at, usu te novum facilisis forensibus. Pri minim reformidans accommodare ea, eum eu pdum suavitate argumentum, an qui facer facete, persius veritus
molestiae cum cu. Mei vitae consequat at, usu te novum facilisis forensibus. Pri minim reformidans accommodare ea, eum eu pdum suavitate argumentum, an qui facer facete, persius veritus molestiae cum cu. Mei vitae consequat at, usu te novum facilisis
forensibus. Pri minim reformidans accommodare ea</p>
</div>
</div>这是另一个示例，其中包含更通用的占位符。一个项目将始终覆盖 50% 的宽度，而高度是动态的。这包括您的示例图片中的垂直偏移。
*
box-sizing: border-box;
body
text-align: center;
background: #131418;
.grid
max-width: 100%;
margin: 0 auto;
width: 95vw;
.grid-item
width: 50%;
background: white;
border: 2px #131418 solid;
.grid-item img
width: 100%;
height: auto;
.grid-item p
font-size: 16px;
padding: 2px 15px;
text-align: justify
.grid-item:nth-of-type(2)
margin-top: 10em
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="grid" data-masonry=' "itemSelector": ".grid-item"'>
<div class="grid-item"><img src="//via.placeholder.com/400x400" />
<p>Lorem ipsum dolor sit amet, et equidem suscipit delicata eos. Simul scribentur delicatissimi te eam. Ius ea ullum dolorum disputando, pri putent definitiones et. Eos odio deleniti euripidis te, mea ex iudico praesent, et vix accusata percipitur. Ei
nec quod lorem constituto. Eius intellegebat ad vis. Erat adipiscing conclusionemque mea at, omnesque cotidieque per ea. Oblique philosophia eos id, vel causae appellantur dissentiunt ad. Utroque corpora his an, suas ullamcorper nam ut. Nec iuvaret
facilisi definiebas ea, ad omnium utamur ius.</p>
</div>
<div class="grid-item"><img src="//via.placeholder.com/500x500" />
<p>Lorem ipsum dolor sit amet, sit prima oporteat ad, ad ridens tamquam his. Docendi platonem mea te, inani mentitum eum cu, in lorem eripuit debitis eum. Nam ei novum causae cotidieque, placerat similique at per, no his stet ferri animal. An option
omittam invidunt vim. Dico aperiam cum te, his ei dicit civibus praesent, sed no salutandi hendrerit. Eam te inani verterem honestatis, id sit choro utroque pertinax. Sit cibo duis laoreet et, ea adhuc aliquam eum, mea paulo nostrum atomorum eu.
Amet habeo semper ex vix, qui ea quas minimum. His at diam quaestio, ut hinc vocent principes eum. Ius sint movet labitur ea, per ad dignissim efficiendi. Idque assum vix at, diceret bonorum impedit eum ei, eos an duis decore deleniti. Duo dictas
conceptam te.</p>
</div>
<div class="grid-item"><img src="//via.placeholder.com/600x600" />
<p>Lorem ipsum dolor sit amet, his altera quodsi everti id. Ex error causae vis, ius ad justo simul nostrud, sea veri recteque ei. Sea et semper percipitur. Ad bonorum interpretaris eos, augue novum legendos vis at. At modus viderer sit, congue fuisset
postulant ea quo. Ei probatus definitionem sed, cu nam solum quaestio, ad nec debet equidem facilis. No duo essent nusquam vituperata, at duo veri eligendi temporibus. Nam expetenda eloquentiam ut. Habemus conclusionemque in eum.</p>
</div>
<div class="grid-item"><img src="//via.placeholder.com/700x700" />
<p>Lorem ipsum dolor sit amet, an tollit ocurreret qui, sit no option eleifend periculis. Quo eu suscipit scaevola consulatu, agam essent vituperata in vim. Qui recteque adversarium et, his ad nisl admodum facilisis. Id sit graeco probatus disputationi.
Blandit ponderum laboramus cu vel. Oblique hendrerit vel ea. Sanctus delenit oportere nec an. Illud equidem voluptaria an ius, cu vidit soleat sit. Vis elit commune ei, qui stet illum repudiare ea. Sint labores neglegentur cu sit, cu alii vocibus
pri. Ad qui tamquam fabulas oportere, nam consetetur consequuntur delicatissimi ea. Nostro pericula tincidunt usu cu.</p>
</div>
<div class="grid-item"><img src="//via.placeholder.com/450x450" />
<p>Lorem ipsum dolor sit amet, alterum bonorum eum eu, cu ancillae partiendo mei, nec sale quando eloquentiam id. Exerci omittantur eu cum, temporibus repudiandae ad ius. Eos ut diceret alterum, an vix latine reformidans. Has ad tamquam nonumes voluptatibus,
mucius moderatius id sed. Has tota aperiam feugait at, zril assueverit persequeris has cu. Qui ea rebum maluisset. Omittam oporteat qui ei, ius ea tale quot. Eius probatus laboramus ius ut, aeque quaerendum ei mei. Fierent partiendo cotidieque mel
at, vis ridens saperet voluptatum ei, ad etiam tantas referrentur eos. Vidit adhuc ius cu, te dicam quaeque sanctus per. Iriure molestie in pro, per ad eius constituam. Ius aliquip sanctus legendos ex, justo aeque abhorreant quo ex. Vis ea movet
causae /p>
</div>
<div class="grid-item"><img src="//via.placeholder.com/550x550" />
<p>Lorem ipsum dolor sit amet, tation neglegentur id duo. Ex qui malis moderatius. Nibh efficiantur mea id, qui at porro percipitur. Cum ea mediocrem democritum, te ferri iriure praesent sit, luptatum suscipiantur eam ea. Ex ipsum invenire efficiendi
ius, an qui mucius tractatos. Vix enim dicat simul cu, pri ei prima tempor numquam. Vim te veri dicat. In mel iusto feugait, eum tale expetendis at, ea sea putant accusamus omittantur. Eos illud utamur referrentur ea. An iisque volumus referrentur
sit, cu has dicit delenit ancillae. Quod veritus percipitur cu vix, at nec ullum philosophia.</p>
</div>
<div class="grid-item"><img src="//via.placeholder.com/650x650" />
<p>Lorem ipsum dolor sit amet, et equidem suscipit delicata eos. Simul scribentur delicatissimi te eam. Ius ea ullum dolorum disputando, pri putent definitiones et. Eos odio deleniti euripidis te, mea ex iudico praesent, et vix accusata percipitur. Ei
nec quod lorem constituto. Eius intellegebat ad vis. Erat adipiscing conclusionemque mea at, omnesque cotidieque per ea. Oblique philosophia eos id, vel causae appellantur dissentiunt ad. Utroque corpora his an, suas ullamcorper nam ut. Nec iuvaret
facilisi definiebas ea, ad omnium utamur ius.</p>
</div>
<div class="grid-item"><img src="//via.placeholder.com/750x750" />
<p>Lorem ipsum dolor sit amet, sit prima oporteat ad, ad ridens tamquam his. Docendi platonem mea te, inani mentitum eum cu, in lorem eripuit debitis eum. Nam ei novum causae cotidieque, placerat similique at per, no his stet ferri animal. An option
omittam invidunt vim. Dico aperiam cum te, his ei dicit civibus praesent, sed no salutandi hendrerit. Eam te inani verterem honestatis, id sit choro utroque pertinax. Sit cibo duis laoreet et, ea adhuc aliquam eum, mea paulo nostrum atomorum eu.
Amet habeo semper ex vix, qui ea quas minimum. His at diam quaestio, ut hinc vocent principes eum. Ius sint movet labitur ea, per ad dignissim efficiendi. Idque assum vix at, diceret bonorum impedit eum ei, eos an duis decore deleniti. Duo dictas
conceptam te.</p>
</div>
<div class="grid-item"><img src="//via.placeholder.com/1400x1400" />
<p>dum suavitate argumentum, an qui facer facete, persius veritus molestiae cum cu. Mei vitae consequat at, usu te novum facilisis forensibus. Pri minim reformidans accommodare ea, eum eu pdum suavitate argumentum, an qui facer facete, persius veritus
molestiae cum cu. Mei vitae consequat at, usu te novum facilisis forensibus. Pri minim reformidans accommodare ea, eum eu pdum suavitate argumentum, an qui facer facete, persius veritus molestiae cum cu. Mei vitae consequat at, usu te novum facilisis
forensibus. Pri minim reformidans accommodare ea</p>
</div>
</div>旁注：Angular has something similar 但我没有这方面的经验。
【讨论】：
【参考方案2】：您可以通过float 和clear 使用纯CSS 来实现这一点，您只需将margins 添加到您的块中。演示：
.container:after
content: "";
display: table;
clear: both;
.a,
.c
float: left;
.c
margin-top: 10px;
.b,
.d
float: right;
margin-top: -30px;
.clear
clear: both;
/* just styles for demo */
.container
background-color: #e0e0e0;
padding: 30px;
/* just styles for demo */
.item
background-color: orange;
font-size: 2em;
color: white;
padding: 10px;
<div class="container">
<div class="item a">One</div>
<br class="clear" />
<div class="item b">Two</div>
<br class="clear" />
<div class="item c">Three</div>
<br class="clear" />
<div class="item d">Four</div>
<br class="clear" />
</div>【讨论】：
以上是关于CSS中的两列渐变定位框的主要内容，如果未能解决你的问题，请参考以下文章