1

我需要一个纯 CSS 选项来移动某些内容，因此它似乎仅在特定宽度的内容部分下方。

我已经为断点设置了样式表，因此可以将特定样式应用于我的移动宽度。

该页面是项目的重复器，每个项目都有一个数字、正文和图标。它们交替出现，HTML 从左侧显示图标变为在右侧显示图标。由于内容的扩展和响应性，它必须是这种方式，并且不能浮动

这是桌面上的输出示例：JS Fiddle。请注意，它是响应式的，正文文本区域中可能有很多文本，并且它会浮动。完美的。

当下到移动端时，它会发生一些变化。图标变为全宽，应位于正文内容下方。

这类作品。问题是 HTML 首先在 DOM 中显示图标，然后在下一次重复时，它最后出现。

div在icon没有 JavaScript的情况下，我怎样才能使它移动位置？这仅适用于移动设备，所以也许 CSS3 对此有解决方案？

这是它目前在移动设备上的外观。您可以看到它是错误的，图标需要始终位于文本下方。它需要扩展到内容并完全响应，没有固定的高度。

您可以看到数字 2、4 等都是正确的，图标显示在下方。

谢谢

4

5 回答 5

4

您应该能够使用flexbox和flex-flowandorder属性来改变方向和元素序列来实现这一点。

于 2013-09-05T13:41:01.790 回答
1

我在这里复制了你的小提琴

你会看到 6 行，我相信所有的行为都是一样的。

前 2 个来自您的原始示例。

在剩下的 4 个中，我已将您原来的类更改为“行”；我一直保持同样的顺序。现在，用于使偶数行样式不同的样式是：

大多数技巧是使用图像的绝对位置，并将其与右侧对齐。（剩下的大部分代码都是你的）

.row {
    border-bottom:1px dotted #464637;
    padding-bottom:15px;
    margin-bottom:15px;
    min-height: 150px;
}

.row .views-field-field-icon{
    display:inline-block;
    width:41%;
    margin-right: 0;
}

.row:nth-child(even) .views-field-field-icon{
    position: absolute;
    right: 0px;
    padding-right: 6%;
}
于 2013-09-05T18:03:39.157 回答
1

为窄设备完成这项工作的 CSS 如下所示：

http://codepen.io/cimmanon/pen/BJleF

.view-reasons .views-reasons-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.view-reasons .views-field-field-icon {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

只需将它们放在适当的媒体查询中即可。这适用于 Opera、Chrome、IE10、Firefox 以及除 Opera Mini 之外的几乎所有移动浏览器（请参阅：http ://caniuse.com/#feat=flexbox ）。

于 2013-09-05T17:27:25.903 回答
0

或者您可以使用 css3:nth-of-type选择器以及vals的答案，

看看这支笔

（我确实更改了您的班级名称，但我认为您仍然可以关注）

您还可以调整浏览器大小并通过媒体查询查看更改，

于 2013-09-05T22:28:34.320 回答
-1

如果没有脚本，您将不会“将 HTML 块移动到不同的顺序”，但是使用一些棘手的 CSS，您可以让它看起来好像您有。

看看我的个人网站nicksaemenes.com（一个正在进行中的工作 - 很明显），看看它是否完成了你正在尝试的事情——我认为它确实做到了。你可以在 Github 上找到它的所有源代码。

您应该研究的一件事是为什么您的 HTML 会交替显示图标/图像和段落的顺序。我建议这是一个问题，并且在这种情况下您的源顺序应该是一致的。

虽然没有像我发布的网站那样深入，但这个 Codepen显示了我网站的早期开发阶段，这可能更容易理解我是如何完成你所追求的目标的。

section:after, .tweener:after, section .info-block:after {
  content: "";
  display: table;
  clear: both;
}

section a, section:hover > div {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
section a:hover, section:hover > div:hover {
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}

html {
  color: #666;
}

h1 {
  color: #333;
  padding: 2rem;
  margin: 0;
  text-align: center;
  font-weight: normal;
}

h2 {
  color: #444;
  margin-top: 0;
}

p {
  line-height: 1.8;
}

li:after {
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.5);
  content: "Nick Anderson - flic.kr/ps/QG591";
  padding: .5rem 1rem .5rem .5rem;
  position: absolute;
  bottom: 1rem;
  right: 0;
  font-size: 10px;
}

/* https://stackoverflow.com/questions/20150621/sass-mixin-for-animation-keyframe-which-includes-multiple-stages-and-transform-p/23861638#23861638
animation mixing
keyframe animation
@include animation('animation-name .4s 1')*/
html {
  background: white;
  padding: 1rem;
  font-family: sans-serif;
}

section {
  background: white;
  max-width: 1024px;
  margin: auto;
  /* The Holy Grail of CSS Centering - http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114 */
}
section a {
  color: #666;
  text-decoration: none;
  padding: 1rem;
  border: 1px solid;
  float: left;
}
section a:hover {
  background: #111;
  border-color: transparent;
  color: white;
  opacity: .75;
}
section img {
  width: 100%;
}
section p {
  margin-top: 0;
  text-align: left;
}
section .contained {
  height: 70%;
  margin: auto;
  width: 100%;
}
section .outer {
  display: table;
  height: 100%;
  width: 100%;
  word-spacing: -1rem;
}
section .inner {
  display: table-cell;
  vertical-align: middle;
}
section .centered {
  display: inline-block;
  float: left;
  position: relative;
  width: 100%;
}
section:hover > div {
  opacity: .5;
}
section:hover > div:hover {
  opacity: 1;
}

/* The "Tweener" ... My addition to allow for cross-browser support of alternating element alignment of non-css-class-ified elements*/
.tweener {
  direction: ltr;
  display: inline-table;
  height: auto;
  width: 50%;
  word-spacing: normal;
}
.tweener .inner {
  width: 100% !important;
}

/*.tweener:nth-of-type(odd) .centered > * {
  @include box-shadow(0 5px 1px -3px rgba(0,0,0,.2));
}*/
.text-block {
  width: 80%;
  float: right;
}

.tweener {
  height: 100%;
  vertical-align: middle;
  width: 50%;
}

section .info-block {
  border-bottom: 1px solid #ccc;
  padding: 4rem 0;
}
section .info-block:last-of-type {
  border: none;
}
section .info-block:nth-child(2n) .outer {
  direction: rtl;
}
section .info-block:nth-child(2n) .text-block {
  float: left;
}

.video-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  position: relative;
}
.video-container iframe,
.video-container object,
.video-container embed {
  border: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@-webkit-keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
@-moz-keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
@-o-keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
@keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
section ul.xfade {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 66.69922%;
  position: relative;
  width: 100%;
}
section ul.xfade li {
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
section ul.xfade li:nth-child(3) {
  -webkit-animation: xfade 12s 0s infinite;
  -moz-animation: xfade 12s 0s infinite;
  -o-animation: xfade 12s 0s infinite;
  animation: xfade 12s 0s infinite;
}
section ul.xfade li:nth-child(2) {
  -webkit-animation: xfade 12s 4s infinite;
  -moz-animation: xfade 12s 4s infinite;
  -o-animation: xfade 12s 4s infinite;
  animation: xfade 12s 4s infinite;
}
section ul.xfade li:nth-child(1) {
  -webkit-animation: xfade 12s 8s infinite;
  -moz-animation: xfade 12s 8s infinite;
  -o-animation: xfade 12s 8s infinite;
  animation: xfade 12s 8s infinite;
}

section .info-block:nth-child(3n+2) ul.xfade li:nth-child(3) {
  -webkit-animation: xfade 12s -1s infinite;
  -moz-animation: xfade 12s -1s infinite;
  -o-animation: xfade 12s -1s infinite;
  animation: xfade 12s -1s infinite;
}
section .info-block:nth-child(3n+2) ul.xfade li:nth-child(2) {
  -webkit-animation: xfade 12s 3s infinite;
  -moz-animation: xfade 12s 3s infinite;
  -o-animation: xfade 12s 3s infinite;
  animation: xfade 12s 3s infinite;
}
section .info-block:nth-child(3n+2) ul.xfade li:nth-child(1) {
  -webkit-animation: xfade 12s 7s infinite;
  -moz-animation: xfade 12s 7s infinite;
  -o-animation: xfade 12s 7s infinite;
  animation: xfade 12s 7s infinite;
}

section .info-block:nth-child(3n+3) ul.xfade li:nth-child(3) {
  -webkit-animation: xfade 12s -2s infinite;
  -moz-animation: xfade 12s -2s infinite;
  -o-animation: xfade 12s -2s infinite;
  animation: xfade 12s -2s infinite;
}
section .info-block:nth-child(3n+3) ul.xfade li:nth-child(2) {
  -webkit-animation: xfade 12s 2s infinite;
  -moz-animation: xfade 12s 2s infinite;
  -o-animation: xfade 12s 2s infinite;
  animation: xfade 12s 2s infinite;
}
section .info-block:nth-child(3n+3) ul.xfade li:nth-child(1) {
  -webkit-animation: xfade 12s 6s infinite;
  -moz-animation: xfade 12s 6s infinite;
  -o-animation: xfade 12s 6s infinite;
  animation: xfade 12s 6s infinite;
}
<!--All photo credits go to Nick Anderson flickr.com/nickanderson33-->
<h1> A collection of techniques I've picked up and put together over the past year or so</h1>
<section>
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <ul class="xfade">
              <li><img alt="dock" src="//c4.staticflickr.com/8/7019/6562781091_0c75a135f6_b.jpg" /></li>
              <li><img alt="shack" src="//c4.staticflickr.com/8/7029/6562780531_d2a5be5157_b.jpg" /></li>
              <li><img alt="flower" src="//c3.staticflickr.com/7/6006/5988132647_94f7193719_b.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Vertical Centering</h2>
              <p>Use any amount of text and any size photo. </p>
              <p>If you shrink the window width you'll see that when the image height is smaller than the text height, the two elements will remain vertically centered with each other. </p>
              <p>This is a modified version of ... </p>
              <a href="http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114"> The Holy Grail of CSS Centering</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <ul class="xfade">
              <li><img alt="stained glass" src="//c4.staticflickr.com/8/7358/8779551390_85fbae4bfb_h.jpg" /></li>
              <li><img alt="ring" src="//c4.staticflickr.com/8/7150/6722043431_b59b6f7d8f_b.jpg" /></li>
              <li><img alt="sunflower" src="//c3.staticflickr.com/7/6182/6085971358_25fdd877b0_b.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>
         
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Alternating Alignment of Elements</h2>
              <p>The HTML structure per row is consistent - image then text.</p>
              <p>Typically, you can accomplish the alternating alignment of elements with floats, but in this case, floating elements removes their ability to be vertically centered - Boo! </p>
              <p>Thus, I employed some ol' RTL trickery. I had to include one additional div (with the "tweener" class) to make this happen, but in the end I think it is worth it. Especially since it works in all modern browers.</p>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
           <ul class="xfade">
              <li><img alt="flooded" src="//c3.staticflickr.com/3/2264/5814476694_4ea5265e3a_b.jpg" /></li>
              <li><img alt="shooting" src="//c4.staticflickr.com/4/3237/5872035040_cfc7f77cb8_b.jpg" /></li>
              <li><img alt="truck" src="//c4.staticflickr.com/8/7358/8779551390_85fbae4bfb_h.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Pure CSS Image Rotator</h2>
              <p>I snagged the initial code from Mark Lee, then made it work for me.</p>
              <p>NOTE: If you use the CSS image rotator you'll want to make sure that your photos (of the same group) use the same aspect ratios.</p>
              <a href="http://codepen.io/leemark/pen/DvliI">Mark's Pen</a>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
		  
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="video-container">
              <iframe width="640" height="360" src="https://www.youtube.com/embed/cbSbbY5ibas?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
         
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Responsive Embedded Video</h2>
              <p>First off, both Kilian Martin and Brett Novak are incredible at what they do. Much respect.</p>
              <p>Lifted from the Smashing Magazine article describing how to make iframes responsive</p>
              <a href="http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/">Smashing Article</a>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
		  
		  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <ul class="xfade">
              <li><img alt="couple" src="//c3.staticflickr.com/7/6007/5988700008_36d5dc34a9_b.jpg" /></li>
              <li><img alt="stars" src="//c3.staticflickr.com/7/6025/5978705415_00f22c1e65_b.jpg" /></li>
              <li><img alt="lake" src="//c3.staticflickr.com/7/6012/5979259078_f4c53fee72_b.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>
         
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Different Transitions for Hover On / Hover Off</h2>
              <p>A subtle, but classy way to add that extra shine to your site is to use different transitions for hover on vs. hover off. The links in this demo have a transition duration of .1s for the hover on, but .5s for the hover off. You have to be careful with this as it can be an unexpected behavior that leads to the impression that something isn't working correctly, but I believe that misperception can only be fought with good design decisions and time. </p>
              <p>Also, if you don't know of Chris Coyier, you have either been living under a rock or you are not a web designer. </p>
              <a href="http://css-tricks.com/different-transitions-for-hover-on-hover-off/">CSS-Tricks Article</a>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
  
</section>

于 2016-05-23T19:05:44.783 回答