html - 为 DIV 内容添加边框

Question

我一直在尝试为我嵌入的 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 加边框，而是试图给 >br> 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 链接。