CSS列堆叠不正确 [英] CSS Columns not Stacking Correctly

查看：86
本文介绍了CSS列堆叠不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一套我编程的CSS列，它们用于前两行，然后开始不正确地堆叠。我尝试了不同的宽度，但无济于事。

您可以在这里看到问题： http ：//innerwestadv.com/dev/ PAGE_ID = 10 。它在Market&媒体研究。如果我拿出这一行，它会更好地堆叠，但我不确定它们有什么不同。



这是一个使用NIVAN主题的wordpress 3.9.2网站。



我在代码中断的HTML中标记了。
$ b

CSS 

  .one-eighth {
 width：7％; 
保证金：10px 1.5％10px 0; 
 float：left; 
} 
 .three-eights {
 width：38％; 
保证金：10px 3.5％10px 0; 
 float：left; 
} 
 .last {
 margin：10px 0; 
} 
 
 @media screen and（max-width：768px）{
 .one-eighth {
 width：100％; 
保证金：0; 
} 
 .three-eights {
 width：100％; 
保证金：0; 
} 
 
}

HTML 

 < div class =eight-eight> 
 < div class =three-eights> 
< strong>广告& amp; amp;公共关系< / strong> 
在客户爱上你的公司之前，他们必须找到你的公司。我们会帮助您把最好的脚放在前面。< / div> 
< div class =八分之一> 
 < div class =最后三分之三> 
< strong>营销计划开发< / strong> 
你知道你的生意是关于什么吗？你做什么，不做什么？你的最终目标是什么？我们的发展计划涵盖的不仅仅是市场营销：它不仅仅回答这些问题，还包括用鼓舞人心的语言阐明公司目的的词语。< / div> 
 
 <！ - 删除此行有助于一些 - > 
 
< div class =八分之一> 
 < div class =three-eights> 
< strong> Brand Creation& amp; amp; amp;管理与LT; /强> 
旋风或警笛的瞬时品牌识别都始于同一地点。我们可以从头开始打造您的品牌，或者帮助重塑品牌。< / div> 
< div class =八分之一> 
 < div class =最后三分之三> 
< strong>市场& amp; amp; amp; amp; amp; amp;媒体研究< / strong> 
您可能有想法，但不了解这个想法背后的研究。让我们找出所有必要的信息并做好肮脏的工作，这样您就可以获得所有荣耀。< / div> 
 
 <！ - 此处的代码破解 - > 
 
< div class =八分之一> 
 < div class =three-eights> 
< strong> Media& amp; amp; amp; amp;社区关系< / strong> 
我们不喜欢透露我们的年龄，但在这种情况下，是时候吹嘘它了。我们老了。这么古老，如果我们还不知道这个故事的合适人选，我们会进行研究以找到一个完美的人。就像一款好酒，随着年龄的增长只会越来越好，对我们来说也是如此。< / div> 
< div class =八分之一> 
 < div class =最后三分之三> 
< strong>网页设计& amp; amp; amp;开发与LT; /强> 
形式和功能齐头并进。如果你知道我们的意思，那么设计一个设计不合理的网站是毫无意义的，或者一个看起来像是被UGLY棒击败的有效网站是毫无意义的。我们无缝集成了表单和功能，以确保您的网站不仅具有视觉吸引力，而且还是您的业务的高性能信息中心。< / div> 
< div class =八分之一> 
 < div class =three-eights> 
媒体策划，购买& amp; amp; amp;分析< /强> （Ipad Wifi图标）
如果没有步骤指示，您不会尝试从宜家生产椅子。你不会梦想在没有地图的情况下穿越泰国。那么，为什么你会在没有完善的媒体战略的情况下花掉你辛苦赚来的钱？让我们来帮助浏览 - 我们可以找到您的受众群体，制定具有成本效益的策略以接触他们，将您的创意推向市场，并衡量每项工作的效果，以最大限度地发挥每个营销美元所花费的影响。< / div> 
< div class =八分之一> 
 < div class =最后三分之三> 
< strong>虚拟主机/管理/维护< / strong> 
我们讨厌404未找到的错误，甚至比每天早上10点从我们下方的绉纱店铺进入我们的办公室的熏肉味培根还要讨厌。除了您特别要求的更新外，我们还会密切关注您的托管网站，并解决出现的任何技术问题。< / div> 
< div class =八分之一> 
 < div class =three-eights> 
< strong>战略规划< / strong> 
我们与您一起确定行动，设定目标，然后与这些目标一起帮助实现行动。我们相信我们的联系和资源都可以做任何事情，这是我们的战略计划。< / div> 
< div class =八分之一> 
 < div class =最后三分之三> 
< strong>社交媒体< / strong> 
确定您知道如何开展社交平台工作，但在开展业务时，您是否有时间确保您正在沟通，建立和吸引您的受众群体，使其不仅成为粉丝，还成为消费者的 DIV> 
< / div>


解决方案

这对我有用。我使用firebug进行测试



删除 

 保证金：0 20px 20px 0 ;

from 

  img.alignleft {
 float：left; 
 margin：0 20px 20px 0; 
}

并查看更改..所有项目都会被安排。尝试out..please ..


I have a set of CSS columns that I programmed and they work for the first 2 rows and then begin to stack incorrectly. I have tried different widths but to no avail.

You can see the problem live here: http://innerwestadv.com/dev/?page_id=10. It starts stacking wrong right under Market & Media Research. If I take out this row it stacks better but I am not sure what the difference is.

It is a wordpress 3.9.2 website using the NIVAN theme.

I have marked in the HTML where the code breaks.

CSS

.one-eighth {
    width:7%;
    margin:10px 1.5% 10px 0;
    float:left;
}
.three-eighths {
    width:38%;
    margin:10px 3.5% 10px 0;
    float:left;
}
.last {
    margin:10px 0;
}

@media screen and (max-width: 768px) {
    .one-eighth {
        width:100%;
        margin:0;
    }
    .three-eighths {
        width:100%;
        margin:0;
    }

}

HTML

 <div class="one-eighth">
        <img class="alignleft size-thumbnail wp-image-221" src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/Advertising1-150x150.png" alt="Advertising" width="150" height="150" /></div>
    <div class="three-eighths">
        <strong>Advertising &amp; Public Relations</strong>
        Before your customers can love your company, they must find your company. We will help you put your best foot forward.</div>
    <div class="one-eighth">
        <img class="alignleft size-thumbnail wp-image-214" src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/Marketing-Plan-Development-150x150.png" alt="Marketing Plan Development" width="150" height="150" /></div>
    <div class="three-eighths last">
        <strong>Marketing Plan Development</strong>
        Do you know what your business is about? What you do and don't do? What your ultimate goals are? Our development plan encompasses more than marketing: it not only answers those questions, but includes the words that spell out the purpose of your company in inspiring language.</div>

    <!-- Removing this Row helps some -->

    <div class="one-eighth">
        <img class="alignleft size-thumbnail wp-image-212" src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/Brand-Creation-150x150.png" alt="Brand Creation" width="150" height="150" /></div>
    <div class="three-eighths">
        <strong>Brand Creation &amp; Management</strong>
        The instantaneous brand recognition of a swoosh or a siren all start in the same place. We can build your brand from the ground up, or help to rebrand it.</div>
    <div class="one-eighth">
        <img class="alignleft size-thumbnail wp-image-213" src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/Market-Media-Research-150x150.png" alt="Market &amp; Media Research" width="150" height="150" /></div>
    <div class="three-eighths last">
        <strong>Market &amp; Media Research</strong>
        You might have the ideas but not the research behind the idea. Let us find out all the information necessary and do the dirty work so you can claim all the glory.</div>

 <!-- CODE BREAKS HERE -->

    <div class="one-eighth">
        <img class="alignleft size-thumbnail wp-image-215" src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/Media-Community-Relations-150x150.png" alt="Media &amp; Community Relations" width="150" height="150" /></div>
    <div class="three-eighths">
        <strong>Media &amp; Community Relations</strong>
        We don’t like revealing our age, but in this case it’s time to brag about it. We are old. So old, if we don’t already know the right person for the story we do the research to find the perfect person who will. Like a good wine, that only gets better with age, the same is true for us.</div>
    <div class="one-eighth">
        <img class="alignleft size-thumbnail wp-image-219" src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/Web-Design-Development-150x150.png" alt="Web Design &amp; Development" width="150" height="150" /></div>
    <div class="three-eighths last">
        <strong>Web Design &amp; Development</strong>
        Form and Function go hand in hand. There is no point in having a beautifully designed website that isn’t effective, or an effective site that got looks like it was beat with the UGLY stick, if you know what we mean. We seamlessly integrate both form and function to ensure your website is not only visually appealing, but also a highly functioning information center for your business.</div>
    <div class="one-eighth">
        <img class="alignleft size-thumbnail wp-image-216" src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/Media-Planning-150x150.png" alt="Media Planning" width="150" height="150" /></div>
    <div class="three-eighths">
        <strong>Media Plannning, Buying &amp; Analysis</strong> (Ipad Wifi Icon)
        You wouldn’t dare attempt to build a chair from IKEA without the step-by-step directions. You wouldn’t dream of traveling across Thailand without a map. So why would you spend your hard earned money without a well-developed media strategy? Let us help navigate- We can find your audience, develop cost-efficient strategies to reach them, get your creative to market, and measure the effectiveness of every effort to maximize the impact of each marketing dollar spent.</div>
    <div class="one-eighth">
        <img class="alignleft size-thumbnail wp-image-220" src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/Web-Hosting-150x150.png" alt="Web Hosting" width="150" height="150" /></div>
    <div class="three-eighths last">
        <strong>Web Hosting/Management/Maintenance</strong>
        We hate the "404 Not Found Error" even more than the tantalizing smell of bacon that wafts into our office at 10am daily from the crepe shop below us. In addition to updates you specifically request, we will also keep an eye on your managed site and address any technical issues as they arise.</div>
    <div class="one-eighth">
        <img class="alignleft size-thumbnail wp-image-218" src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/Strategic-Planning-150x150.png" alt="Strategic Planning" width="150" height="150" /></div>
    <div class="three-eighths">
        <strong>Strategic Planning</strong>
        We work with you to determine actions, set goals, and then with those goals, we help achieve the actions. We believe with both our connections and resources we can do anything, that’s our strategic plan.</div>
    <div class="one-eighth">
        <img class="alignleft size-thumbnail wp-image-217" src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/Social-Media-150x150.png" alt="Social Media" width="150" height="150" /></div>
    <div class="three-eighths last">
        <strong>Social Media</strong>
        Sure you know how to work the social platforms, but when running a business do you have time to make sure you’re communicating, building and engaging your audience to turn them into not only fans, but consumers?s</div>
    </div>

解决方案

This worked for me. I tested using firebug

Remove

margin: 0 20px 20px 0;

from

img.alignleft {
   float: left;
   margin: 0 20px 20px 0;
}

and see the change..all the items will get aranged..Try it out..please..

这篇关于CSS列堆叠不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆