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

debugcn 发表于 Dev

阿努巴夫（Anubhav Bhattacharyya）

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

因此，我希望在页面加载时在社交媒体图标之后显示“输入您的电子邮件和邮件”部分。为了清楚起见，我无法修改社交媒体图标的位置。我只是在该博客文章的文本编辑器部分中添加了原始html。我只想通过CSS做某事。如果可能，没有JavaScript！

希望这些信息对您有所帮助，请让我知道某个地方是否出错。非常感谢

MKAD

这是CSS解决方案，希望对您有所帮助！

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。