Question

我正在构建一个与此UI类似的菜单：

我正在寻找一种实施它的好方法。我在这个项目中使用bootstrap。容器是其他DIV内部的引导程序container-fluid，其宽度为屏幕的50％。这就是我使用container-fluid的原因 - 因为这不是固定宽度的容器。

我可以使用bootstrap（3）Grid（col-xx-x），或任何其他css解决方案。

这是我到目前为止使用float: left

所做的工作

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

你会如何实现它？

像我一样使用浮动？ Flex不是后向兼容性问题的选项。使用引导网格？其他方式？

Answer 1

如果您坚持使用纯CSS 修复程序，请使用floating和相对宽度单位或%。

这是一个很好的简单结构，不需要很多代码或bootstrap 。

在.wrapper div

整个设置

然后......将每两个.square元素换成水平.row
然后......使用nth-of-type选择器进行必要的操作根据元素是否调整所需的偏移量是.square div中的第一个或第二个.row元素。

每个.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网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像石膏在墙上贴合石头。你可能已经在互联网上看到过它。

我知道你说你想避免使用外部库但是......

您可以运行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但我没有经验。

Answer 2

您可以使用纯CSS，float和clear来实现此目的，只需将margin添加到您的块即可。演示：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

CSS中的渐变位置框分为两列

2 个答案:

现在，我真的更喜欢这样做。