html - CSS 列未正确堆叠

Question

我有一组我编写的 CSS 列，它们适用于前两行，然后开始错误地堆叠。我尝试了不同的宽度但无济于事。

您可以在此处实时查看问题:http://innerwestadv.com/dev/?page_id=10 .它在市场与媒体研究下开始出现错误。如果我取出这一行，它会堆叠得更好，但我不确定有什么区别。

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

我在 HTML 中标记了代码中断的地方。

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>

Answer 1

这对我有用。我使用 Firebug 进行了测试

移除

margin: 0 20px 20px 0;

来自

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

然后看到变化..所有的元素都会被安排好..试一试..请..