左右交替显示图像位置

时间：2018-03-21 17:21:41

标签： html css flexbox

我有许多元素正在使用php动态添加到页面中。我希望图像能够为每个项目交替（左和右）。

我试过玩nth odd / even但似乎无法让它工作。

我有什么遗失的吗？

这是从我的PHP代码输出的内容的示例。我希望第一张图片在左边，第二张图片在右边。

.package {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.card-left {
  background: #e9e9e9;
  position: relative;
  margin-bottom: 40px;
  font-size: 0;
  box-sizing: border-box;
}

.col-img {
  display: inline-block !important;
  font-size: 16px;
  width: 58.333333%;
  height: 100%;
  position: relative;
  vertical-align: top;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  box-sizing: border-box;
}

.col-img img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  cursor: pointer;
  display: inline-block;
  position: relative;
  zoom: 1;
}

.col-content {
  display: inline-block !important;
  font-size: 16px;
  padding: 2%;
  height: 100%;
  position: relative;
  vertical-align: top;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  width: 41.666667%;
  box-sizing: border-box;
}

.packages {
  padding: 0 2%;
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 1300px;
  position: relative;
  margin: 0 auto;
}

.col-content h3 {
  color: #6f6ab2;
}

.col-content h5 {
  color: #ccae4c !important;
}
<div class="packages">
  <div class="package">
    <!-- card -->
    <div class="card-left">
      <div class="col-img">
        <img src="https://www.box.com/sites/default/files/img/social/box1200x630.jpg"> </div>
      <div class="col-content">
        <h3>Fake Room Package for Testing</h3>
        <h5> This is a custom headline! </h5>
        <p> </p>
        <p>Spicy jalapeno bacon ipsum dolor amet andouille t-bone tail, shankle meatloaf jowl jerky. Tongue shank cupim, sirloin flank pork chop capicola. Short ribs short loin doner corned beef pastrami. Leberkas beef jowl venison burgdoggen pork chop chuck
          pork belly bresaola turducken ham hock sirloin kevin porchetta rump. Alcatra shank pig tenderloin, cow meatloaf strip steak prosciutto. Ground round meatball fatback shankle strip steak pork chop shank cupim tail beef alcatra beef ribs.</p>
        <p></p> <a class="btn purple" href="#" target="_blank"><span>Check Availability</span></a>
      </div>
    </div>
    <!-- end card -->
  </div>
  <div class="package">
    <!-- card -->
    <div class="card-left">
      <div class="col-img">
        <img src="https://www.box.com/sites/default/files/img/social/box1200x630.jpg"> </div>
      <div class="col-content">
        <h3>Fake Room Package for Testing</h3>
        <h5> This is a custom headline! </h5>
        <p> </p>
        <p>Spicy jalapeno bacon ipsum dolor amet andouille t-bone tail, shankle meatloaf jowl jerky. Tongue shank cupim, sirloin flank pork chop capicola. Short ribs short loin doner corned beef pastrami. Leberkas beef jowl venison burgdoggen pork chop chuck
          pork belly bresaola turducken ham hock sirloin kevin porchetta rump. Alcatra shank pig tenderloin, cow meatloaf strip steak prosciutto. Ground round meatball fatback shankle strip steak pork chop shank cupim tail beef alcatra beef ribs.</p>
        <p></p> <a class="btn purple" href="#" target="_blank"><span>Check Availability</span></a>
      </div>
    </div>
    <!-- end card -->
  </div>
</div>

3 个答案:

答案 0 :(得分：0)

尝试在bind(X.class).annotatedWith(Foo.class).to(X1.classs); 课程中使用display:flex，并使用.card-left选择器使用flex-direction: row-reverse替换替换图片位置

:nth-child(even)
.package {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.card-left {
  background: #e9e9e9;
  position: relative;
  margin-bottom: 40px;
  font-size: 0;
  box-sizing: border-box;
  display: flex;
}

.package:nth-child(even) .card-left {
  flex-direction: row-reverse;
}

.col-img {
  font-size: 16px;
  width: 58.333333%;
  height: 100%;
  position: relative;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  box-sizing: border-box;
}

.col-img img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  position: relative;
}

.col-content {
  font-size: 16px;
  padding: 2%;
  height: 100%;
  position: relative;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  width: 41.666667%;
  box-sizing: border-box;
}

.packages {
  padding: 0 2%;
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 1300px;
  position: relative;
  margin: 0 auto;
}

.col-content h3 {
  color: #6f6ab2;
}

.col-content h5 {
  color: #ccae4c !important;
}

答案 1 :(得分：0)

最简单的方法是使用你已经拥有的东西并设置.package：nth-​​child（even）.col-img {float：right; } 

.package {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.package:nth-child(even) .col-img {
  float: right;
}

.card-left {
  background: #e9e9e9;
  position: relative;
  margin-bottom: 40px;
  font-size: 0;
  box-sizing: border-box;
}

.col-img {
  display: inline-block !important;
  font-size: 16px;
  width: 58.333333%;
  height: 100%;
  position: relative;
  vertical-align: top;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  box-sizing: border-box;
}

.col-img img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  cursor: pointer;
  display: inline-block;
  position: relative;
  zoom: 1;
}

.col-content {
  display: inline-block !important;
  font-size: 16px;
  padding: 2%;
  height: 100%;
  position: relative;
  vertical-align: top;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  width: 41.666667%;
  box-sizing: border-box;
}

.packages {
  padding: 0 2%;
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 1300px;
  position: relative;
  margin: 0 auto;
}

.col-content h3 {
  color: #6f6ab2;
}

.col-content h5 {
  color: #ccae4c !important;
}
<div class="packages">


  <div class="package">
    <!-- card -->
    <div class="card-left">
      <div class="col-img">
        <img src="https://www.box.com/sites/default/files/img/social/box1200x630.jpg"> </div>
      <div class="col-content">
        <h3>Fake Room Package for Testing</h3>
        <h5> This is a custom headline! </h5>
        <p> </p>
        <p>Spicy jalapeno bacon ipsum dolor amet andouille t-bone tail, shankle meatloaf jowl jerky. Tongue shank cupim, sirloin flank pork chop capicola. Short ribs short loin doner corned beef pastrami. Leberkas beef jowl venison burgdoggen pork chop chuck
          pork belly bresaola turducken ham hock sirloin kevin porchetta rump. Alcatra shank pig tenderloin, cow meatloaf strip steak prosciutto. Ground round meatball fatback shankle strip steak pork chop shank cupim tail beef alcatra beef ribs.</p>


        <p></p> <a class="btn purple" href="#" target="_blank"><span>Check Availability</span></a>
      </div>

    </div>
    <!-- end card -->
  </div>










  <div class="package">
    <!-- card -->
    <div class="card-left">
      <div class="col-img">
        <img src="https://www.box.com/sites/default/files/img/social/box1200x630.jpg"> </div>
      <div class="col-content">
        <h3>Fake Room Package for Testing</h3>
        <h5> This is a custom headline! </h5>
        <p> </p>
        <p>Spicy jalapeno bacon ipsum dolor amet andouille t-bone tail, shankle meatloaf jowl jerky. Tongue shank cupim, sirloin flank pork chop capicola. Short ribs short loin doner corned beef pastrami. Leberkas beef jowl venison burgdoggen pork chop chuck
          pork belly bresaola turducken ham hock sirloin kevin porchetta rump. Alcatra shank pig tenderloin, cow meatloaf strip steak prosciutto. Ground round meatball fatback shankle strip steak pork chop shank cupim tail beef alcatra beef ribs.</p>


        <p></p> <a class="btn purple" href="#" target="_blank"><span>Check Availability</span></a>
      </div>

    </div>
    <!-- end card -->
  </div>









</div>

答案 2 :(得分：0)

.package {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.card-left {
  background: #e9e9e9;
  position: relative;
  margin-bottom: 40px;
  font-size: 0;
  box-sizing: border-box;
}

.col-img {
  display: inline-block !important;
  font-size: 16px;
  width: 58.333333%;
  height: 100%;
  position: relative;
  vertical-align: top;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  box-sizing: border-box;
}

.package:nth-child(even) .col-img{
  float: right;
}

.col-img img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  cursor: pointer;
  display: inline-block;
  position: relative;
  zoom: 1;
}

.col-content {
  display: inline-block !important;
  font-size: 16px;
  padding: 2%;
  height: 100%;
  position: relative;
  vertical-align: top;
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  width: 41.666667%;
  box-sizing: border-box;
}

.packages {
  padding: 0 2%;
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 1300px;
  position: relative;
  margin: 0 auto;
}

.col-content h3 {
  color: #6f6ab2;
}

.col-content h5 {
  color: #ccae4c !important;
}
<div class="packages">


  <div class="package">
    <!-- card -->
    <div class="card-left">
      <div class="col-img">
        <img src="https://www.box.com/sites/default/files/img/social/box1200x630.jpg">
        </div>
      <div class="col-content">
        <h3>Fake Room Package for Testing</h3>
        <h5> This is a custom headline! </h5>
        <p> </p>
        <p>Spicy jalapeno bacon ipsum dolor amet andouille t-bone tail, shankle meatloaf jowl jerky. Tongue shank cupim, sirloin flank pork chop capicola. Short ribs short loin doner corned beef pastrami. Leberkas beef jowl venison burgdoggen pork chop chuck
          pork belly bresaola turducken ham hock sirloin kevin porchetta rump. Alcatra shank pig tenderloin, cow meatloaf strip steak prosciutto. Ground round meatball fatback shankle strip steak pork chop shank cupim tail beef alcatra beef ribs.</p>


        <p></p> <a class="btn purple" href="#" target="_blank"><span>Check Availability</span></a>
      </div>

    </div>
    <!-- end card -->
  </div>










  <div class="package">
    <!-- card -->
    <div class="card-left">
      <div class="col-img">
        <img src="https://www.box.com/sites/default/files/img/social/box1200x630.jpg"> </div>
      <div class="col-content">
        <h3>Fake Room Package for Testing</h3>
        <h5> This is a custom headline! </h5>
        <p> </p>
        <p>Spicy jalapeno bacon ipsum dolor amet andouille t-bone tail, shankle meatloaf jowl jerky. Tongue shank cupim, sirloin flank pork chop capicola. Short ribs short loin doner corned beef pastrami. Leberkas beef jowl venison burgdoggen pork chop chuck
          pork belly bresaola turducken ham hock sirloin kevin porchetta rump. Alcatra shank pig tenderloin, cow meatloaf strip steak prosciutto. Ground round meatball fatback shankle strip steak pork chop shank cupim tail beef alcatra beef ribs.</p>


        <p></p> <a class="btn purple" href="#" target="_blank"><span>Check Availability</span></a>
      </div>

    </div>
    <!-- end card -->
  </div>









</div>

相关问题
最新问题