Question

我有一些来自CMS的内容，并希望在其中添加Google Adsense展示位置。我当然可以解析内容并读下几段并在那里插入html，但理想情况下我希望我可以将文本换行而不必这样做。

这是我现在得到的一个例子：

                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.                                         
                                Duis id venenatis lorem. Donec et
                                erat vitae neque tempus molestie nec tempor lacus. Nunc                
                                ncidunt placerat nulla nec 
                                luctus. Vestibulum ante ipsum primis in faucibus orci 
                                luctus et ultrices posuere cubilia 
                                urae; Fusce eu libero eget velit commodo ornare. Vivamus 
                                convallis posuere nulla. Vivamus 
________________________________non tellus ac nibh placerat tempus. Nam id tellus sit amet 
                               |ipsum lobortis dictum. 
                               |Vestibulum ante ipsum primis in faucibus orci luctus et 
                               |ultrices posuere cubilia Curae; 
                               |Pellentesque habitant morbi tristique senectus et netus et                    
                               |malesuada fames ac turpis 
                               |egestas. Vestibulum ante ipsum primis in faucibus orci  
           ADSENSE             |luctus et ultrices posuere cubilia 
                               |Curae; Donec accumsan, arcu non ornare suscipit, massa 
                               |mauris iaculis purus, eget dapibus 
                               |erat nisl at nunc. Phasellus ac odio diam, ac tempor mi. 
                               |Phasellus magna felis, faucibus et 
                               |tincidunt id, rutrum ac mauris. Nullam elementum, lorem 
_______________________________|eget cursus imperdiet, turpis magna 
ultricies urna, vulputate tristique magna ante et magna.

显然我想要的是：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id venenatis lorem. Donec et
erat vitae neque tempus molestie nec tempor lacus. Nunc ncidunt placerat nulla nec 
luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia 
urae; Fusce eu libero eget velit commodo ornare. Vivamus convallis posuere nulla. Vivamus 
________________________________non tellus ac nibh placerat tempus. Nam id tellus sit amet
                               |ipsum lobortis dictum. 
                               |Vestibulum ante ipsum primis in faucibus orci luctus et 
                               |ultrices posuere cubilia Curae; 
                               |Pellentesque habitant morbi tristique senectus et netus et                    
                               |malesuada fames ac turpis 
                               |egestas. Vestibulum ante ipsum primis in faucibus orci  
           ADSENSE             |luctus et ultrices posuere cubilia 
                               |Curae; Donec accumsan, arcu non ornare suscipit, massa 
                               |mauris iaculis purus, eget dapibus 
                               |erat nisl at nunc. Phasellus ac odio diam, ac tempor 
                               |Phasellus magna felis, faucibus et 
                               |tincidunt id, rutrum ac mauris. Nullam elementum, lorem 
_______________________________|eget cursus imperdiet, turpis magna 
    ultricies urna, vulputate tristique magna ante et magna.

我已经尝试了浮动，边距，顶部位置的每个组合，并且无法获得所需的显示。

Answer 1

您必须在AdSense div之前添加额外元素，例如this demo fiddle。

CSS：

#admargin {
    float: left;
    width: 0;
    height: 60px;
}
#ad {
    clear: left;
    float: left;
}
p {
    line-height: 20px;
}

HTML：

<div id="admargin"></div>
<div id="ad"></div>
<p>Lorem ipsum dolor sit amet...</p>

Answer 2

当您需要将浮动内容插入内容中间某处时，看起来您正在从容器顶部浮动内容并设置上边距。

<!-- all of your html wrapper stuff -->
<div class="article">
    <div class="ads">Support our sponsers!</div>
    <!-- a bunch of text content -->
</div>
<!-- end of your html wrapper stuff -->

你需要的更像是：

<!-- all of your html wrapper stuff -->
<div class="article">
    <!-- beginning of text content -->
    <div class="ads">Support our sponsers!</div>
    <!-- end of text content -->
</div>
<!-- end of your html wrapper stuff -->

两者的css只是将广告容器向左浮动并指定宽度和高度。

Answer 3

实际上，一个简单的浮点数应该在这里真正起作用。

这是 example 。这里使用的代码是：

#float {
    background: red;
    width: 50px;
    height: 50px;
    float: left;
}

编辑：我误解了你的问题，广告位于容器的顶部！（你应该加上它！）

好吧，我真的认为没有办法单独使用CSS，你必须使用一些漂亮的javascript解决方案将div更深入地移动到文本节点。

围绕div包装内容的正确代码是什么？

3 个答案:

CSS：

HTML：