Question

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

您可以在此处查看问题：http://innerwestadv.com/dev/?page_id=10。它开始在Market＆amp; amp;媒体研究。如果我拿出这一行它会更好地堆叠，但我不确定它的区别是什么。

这是一个使用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

这对我有用。我用萤火虫测试了

删除

margin: 0 20px 20px 0;

这

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

并查看更改..所有项目都将得到安排。试一试..请...

Answer 2

这更像是一个建议而不是一个答案，但我认为如果用css表格显示这样做的话会更清晰。

.column-wrapper {
   display: table;
   width: ?px
}

.column-left, .column-right {
   display: table-cell;
   width: 50%;
   vertical-align: top;
}

<div class="column-wrapper">
   <div class="column-left">
    <div>Content div top left</div>
    <div>Content div bottom left</div>
</div>
<div class="column-right">
    <div>Content div top right</div>
    <div>Content div bottom right</div>
</div>

我最近开始使用这种方法，它比浮动更清洁，出于布局目的几乎和使用表IMO一样糟糕（我知道这样的争议）。希望这有帮助！

注意：如果您需要将所有列都设置为相同的高度而不必为每个列指定高度，这也会非常容易。

CSS列未正确堆叠

2 个答案: