Question

我根本不经常在这里发帖，只有在我被绊倒并且确定会时才发帖。

我在商品标签中有一个div标签，并且div标签不会扩展该商品标签所具有的背景。

我拥有的代码被分解为许多不同的文件以使用jsfiddle，因此我将其发布在这里，并提供正在发生的事情的屏幕截图。如果你们能弄清楚，一个解释将不胜感激。

这是正在发生的事情的屏幕快照，我希望Twitter位于twitter小部件上方，但它在facebook下溢出，而不是向下延伸文章背景。

这是CSS：https://pastebin.com/y1MPG6rV 粘贴到这里的字符太多了。

这是HTML：

        <!-- Wrapper -->
        <div id="wrapper">
                <!-- About -->
                <article id="about">
                    <h2 class="major">About.</h2>
                    <span class="image main"><img src="images/fbcover.jpg" alt="" /></span>
                    <div class="medias"><center>
                    <div>
                    <span>Facebook</span>
                    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FDelusionsEntertainment%2F&tabs&width=340&height=180&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="300" height="180"
                        style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                    </div>
                    <div class="cust">
                    <span>Twitter</span>
                    <a class="twitter-timeline" data-width="305" data-height="356" data-theme="light" href="https://twitter.com/DelusionsENT?ref_src=twsrc%5Etfw">Tweets by DelusionsENT</a>
                    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                    </div>
                    </center></div>
                </article>
</div>

            <!-- Footer -->
            <footer id="footer">
                <p class="copyright">Delusions Entertainment™</p>
            </footer>

        </div>

        <!-- BG -->
        <div id="bg"></div>

        <!-- Scripts -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/browser.min.js"></script>
        <script src="assets/js/breakpoints.min.js"></script>
        <script src="assets/js/util.js"></script>
        <script src="assets/js/main.js"></script>
        <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
        <script>
            /* Demo purposes only */
        $(".hover").mouseleave(
          function() {
            $(this).removeClass("hover");
          }
        );
        </script>

    </body>

    </html>

Answer 1

您可以使用以下方式代替固定高度：

.medias { height:auto }

尝试解决导致文本在左侧新行上溢出的溢出问题

1 个答案: