Question

切换到较小的视口时，我的文字没有正确包装。（使窗口变小）。有没有人知道问题是什么或我如何解决这个问题？

“kan ik met”与该段的其余部分分开。

当我使视口小于：

时 “kan ik met”和“opleidingscheques betalen？Heb ik recht op”与该段的其他部分分开。

（我还不能发布图片）

提前致谢！

<style type="text/css">
#links {
}

#otherinfo {
    float:right;
    clear:right;
}
.campus {
    width: 300px;
}
#hoofdzetel {
    float: right;
}
#sbo {
    float: right;
}
#hasselt {
    float: right;
    clear: right;
}
#genk {
    float: right;
}
#neerpelt {
    float: right;
    clear:right;
}
#maaseik {
    float: right;
}
#tongeren {
    float: right;
    clear: right;
}
#tessenderlo {
    float: right;
}</style>
<div class="campus" id="hasselt">
    <p><strong><img alt="SYNTRA Limburg campus Hasselt" src="/sites/files/content/algemene_paginas/thumb_sbo.png" style="width: 90px; height: 90px; float: left; padding: 10px;" />Bedrijfsopleidingen</strong><br />
        Herkenrodestraat 20<br />
        3600 Genk</p>
    <p>&rarr; <a href="/node/5517">Meer info</a></p>
</div>
<div class="campus" id="hoofdzetel">
    <p><strong><img alt="SYNTRA Limburg campus Genk" src="/sites/files/content/algemene_paginas/thumb_hoofdzetel.jpg" style="width: 90px; height: 90px; float: left; padding: 10px;" />Hoofdzetel</strong><br />
        Herkenrodestraat 20<br />
        3600 Genk</p>
    <p>&rarr; <a href="/node/2307">Meer info</a></p>
</div>
<div class="campus" id="hasselt">
    <p><strong><img alt="SYNTRA Limburg campus Hasselt" src="/sites/files/content/algemene_paginas/thumb_campushasselt.jpg" style="width: 90px; height: 90px; float: left; padding: 10px;" />Campus Hasselt</strong><br />
        G. Verwilghensingel 40<br />
        3500 Hasselt</p>
    <p>&rarr; <a href="/node/2309">Meer info</a></p>
</div>
<div class="campus" id="genk">
    <p><strong><img alt="SYNTRA Limburg campus Genk" src="/sites/files/content/algemene_paginas/thumb_campusgenk.jpg" style="width: 90px; height: 90px; float: left; padding: 10px;" />Campus Genk</strong><br />
        Kerkstraat 1<br />
        3600 Genk</p>
    <p>&rarr; <a href="/node/2308">Meer info</a></p>
</div>
<div class="campus" id="neerpelt">
    <p><strong><img alt="SYNTRA Limburg campus Neerpelt" src="/sites/files/content/algemene_paginas/thumb_campusneerpelt.jpg" style="float: left; padding: 10px;" />Campus Neerpelt</strong><br />
        Hoekstraat 50<br />
        3910 Neerpelt</p>
    <p>&rarr; <a href="/node/2311">Meer info</a><br />
        &nbsp;</p>
</div>
<div class="campus" id="maaseik">
    <p><strong><img alt="SYNTRA Limburg campus Maaseik" src="/sites/files/content/algemene_paginas/thumb_campusmaaseik.jpg" style="float: left; padding: 10px;" />Campus Maaseik</strong><br />
        Weertersteenweg 135A<br />
        3680 Maaseik</p>
    <p>&rarr; <a href="/node/2310">Meer info</a></p>
</div>
<div class="campus" id="tongeren">
    <p><strong><img alt="SYNTRA Limburg campus Tongeren" src="/sites/files/content/algemene_paginas/thumb_campustongeren.jpg" style="width: 90px; height: 90px; float: left; padding: 10px;" />Campus Tongeren</strong><br />
        Overhaemlaan 11<br />
        3700 Tongeren</p>
    <p>&rarr; <a href="/node/2313">Meer info</a></p>
</div>
<div class="campus" id="tessenderlo">
    <p><strong><img alt="SYNTRA Limburg campus Tessenderlo" src="/sites/files/content/algemene_paginas/thumb_campustessenderlo.jpg" style="width: 90px; height: 90px; float: left; padding: 10px;" />Campus Tessenderlo</strong><br />
        Heilig Hartlaan 16<br />
        3980 Tessenderlo</p>
    <p>&rarr; <a href="/node/2312">Meer info</a></p>
</div>
<div id="links">
    <p>Kan ik met <a href="veelgestelde-vragen-prijs-en-betaling">opleidingscheques </a>betalen? Heb ik recht op<a href="veelgestelde-vragen-studeren-bij-syntra#educatief-verlof"> educatief verlof</a>?</p>
    <p>Bekijk eerst de <a href="veelgestelde-vragen">veelgestelde vragen</a>.&nbsp;Je vindt daar een overzicht van de meest voorkomende vragen van cursisten en geïnteresseerden.</p>
    <p>Bijkomende&nbsp;<a href="/node/18">vragen</a>,&nbsp;<a href="/node/19">klachten</a>&nbsp;of&nbsp;<a href="/node/20">ideeën</a>&nbsp;kan je via het gepaste formulier meedelen.</p>
    <p>De campussen zijn ook telefonisch bereikbaar. Klik rechts op &quot;meer info&quot; voor uitgebreide contactgegevens.</p>
    <p id="otherinfo"><strong><a href="veelgestelde-vragen">Veelgestelde vragen</a> - <a href="fotogalerijen">Fotogalerijen </a>- <a href="agenda">Agenda </a>- <a href="brochures">Brochures</a></strong></p>
</div>

Answer 1

你有一个浮动问题。一个简单的解决方法是添加这个： ~~#links { 清楚：左; }~~

这有点过于浮动。我认为禁食的解决方案如下：

.responsive-layout-narrow #links,
.responsive-layout-mobile #links
{
    clear: both;
}

这将在较小的屏幕上清除您的链接容器。

段落不在不同的视口中

1 个答案: