Question

所以我面临的问题是，对于我的博客文章页面，我希望我在底部专门插入的原始html出现在社交媒体图标之后。

相同的链接是 - My post page

所以我希望“输入您的电子邮件和单身部分”在社交媒体图标加载页面后显示。为了清楚起见，我无法修改社交媒体图标的位置。我只是在该博客文章的文本编辑器部分添加了原始html。我很想通过css做点什么。如果可能的话，没有javascript！

希望这些信息有所帮助，如果我某处出错，请告诉我。非常感谢

Answer 1

这是css解决方案，我希望它有所帮助！

＆＃13;

@keyframes dropemail {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(0);
      }
    }

    #social-media-icon {
      background: yellow;
      padding: 30px;
      
      animation-name: dropemail;
      animation-iteration-count: 1;
      animation-timing-function: ease-out;
      animation-duration: 0.6s;
    }

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div id="social-media-icon" class="social-links rounded-share-icons">
	    	<a class="facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fchevaun.com%2Fblog%2Fcreative-freedom%2F">
					<i class="icon fa fa-facebook"></i>
			</a>
		<a class="twitter" href="https://twitter.com/share?text=Creative+Freedom">
					<i class="icon fa fa-twitter"></i>
			</a>
		<a class="google-plus" href="https://plus.google.com/share?url=http%3A%2F%2Fchevaun.com%2Fblog%2Fcreative-freedom%2F">
					<i class="icon fa fa-google-plus"></i>
			</a>
		<a class="linkedin" href="https://linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fchevaun.com%2Fblog%2Fcreative-freedom%2F&amp;title=Creative+Freedom">
					<i class="icon fa fa-linkedin"></i>
			</a>
		<a class="tumblr" href="http://www.tumblr.com/share/link?url=http%3A%2F%2Fchevaun.com%2Fblog%2Fcreative-freedom%2F&amp;name=Creative+Freedom&amp;description=%E2%80%9CMaking+the+simple+complicated+is+commonplace%3B+making+the+complicated+simple%2C+awesomely+simple%2C+that%26%238217%3Bs+creativity.%E2%80%9D+%26%238211%3B+Charles+Mingus+%26nbsp%3B+Creativity+is+all+about+going+beyond+boundaries%2C+venturing+out+into+an+unknown+that+is+bound+by+the+endless+and+the+horizon.+It+is+the+ability+to+visualize+beyond+the+horizon%2C+with+no+norms+or+rules+to+keep%26hellip%3B">
					<i class="icon fa fa-tumblr"></i>
			</a>
		<a class="pinterest" href="https://pinterest.com/pin/create/button/?url=http%3A%2F%2Fchevaun.com%2Fblog%2Fcreative-freedom%2F&amp;description=Creative+Freedom&amp;media=http://chevaun.com/wp-content/uploads/2017/02/1.jpeg">
					<i class="icon fa fa-pinterest"></i>
			</a>
		    </div>
<div id="signup">
  <ul>
    <li>
      <input type="email" placeholder="Enter your email" name="EMAIL" class="required email userEmail" id="mce-EMAIL">
    </li>
    <li><a href="#" class="linkMain" onclick="document.forms[&quot;mc-embedded-subscribe-form&quot;].submit(); return false;">Sign Up For Beta</a></li>
  </ul>
</div>

＆＃13;

如何将<div>元素放在另一个我无法访问的类或div之后

1 个答案: