Question

我一直在尝试向我的嵌入式Twitter帖子添加边框
但这不起作用。
我使用了官方Twitter网站上的自动嵌入生成器
复制代码并将其粘贴。
我已经为复制的代码创建了DIV。
现在，当我尝试在边框周围放置边框时
现在就可以正常工作了。

.twitter_page {
    /*float: right;*/
    padding: 0 218px 0 0;
        /* border: solid; */
    margin-right: -60px;
    /*margin-left: 54px;*/
    margin-top: -410px;
    border : solid 2px grey;
}

<div class="social_page">

<div class="twitter_page">
              
                <a class="twitter-timeline" data-width="350" data-height="400" href="https://twitter.com/AZLily_official?ref_src=twsrc%5Etfw">Tweets by AZLily_official</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<div class="facebook_page">
                            
                     <iframe src="https://www.facebook.com/plugins/page.php? 
                    href=https%3A%2F%2Fwww.facebook.com%2FAZLily.yuri&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="350" 
                    height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
  </div>



  </div>

如果我这样做，整个DIV就会变成边框，而我似乎无法减小DIV的宽度，
但是我不是在给DIV加上边框，而是在给Twitter框架加上边框。
有可能吗？

Answer 1

这应该可以解决问题。
1）通过设置宽度和高度（内联/通过CSS）来更改twitter div标签的大小。
2）设置position：relative属性可以任意调整位置。

.twitter_page {
    /*float: right;*/
    padding: 0px 0 0;
        /* border: solid; */
    margin-right: 0px;
    position:relative;
    left:20%;
    /*margin-left: 54px;*/
    margin-bottom: 30px;
    border : solid 2px grey;
}

<div class="social_page">

<div class="twitter_page" style="width:350px;height:350px;">
              
                <a class="twitter-timeline" data-width="350" data-height="400" href="https://twitter.com/AZLily_official?ref_src=twsrc%5Etfw">Tweets by AZLily_official</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<div class="facebook_page">
                        <br/>  <br/>
                     <iframe src="https://www.facebook.com/plugins/page.php? 
                    href=https%3A%2F%2Fwww.facebook.com%2FAZLily.yuri&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="350" 
                    height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
  </div>



  </div>

Here是jsfiddle链接。

Answer 2

在twitter_page类中，设置

padding: 0px;
display: inline-block;

这应该有效。

Answer 3

您可以尝试... （只需在twitter_page中添加一个内部div并设置边框）

.twitter_page {
    /*float: right;*/
    padding: 0 218px 0 0;
        /* border: solid; */
    margin-right: -60px;
    /*margin-left: 54px;*/
    margin-top: -410px;
}

.in_twitter_page {
    border : solid 2px grey;
}

<div class="social_page">

<div class="twitter_page">
  <div class="in_twitter_page">
  <a class="twitter-timeline" data-width="350" data-height="400" href="https://twitter.com/AZLily_official?ref_src=twsrc%5Etfw">Tweets by AZLily_official</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
</div>

<div class="facebook_page">
                            
                     <iframe src="https://www.facebook.com/plugins/page.php? 
                    href=https%3A%2F%2Fwww.facebook.com%2FAZLily.yuri&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="350" 
                    height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
  </div>



  </div>

为DIV内容添加边框

3 个答案: