问题
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 & 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 & 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 & Media Research" width="150" height="150" /></div>
<div class="three-eighths last">
<strong>Market & 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 & Community Relations" width="150" height="150" /></div>
<div class="three-eighths">
<strong>Media & 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 & Development" width="150" height="150" /></div>
<div class="three-eighths last">
<strong>Web Design & 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 & 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>
回答1:
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..
回答2:
This is more of a suggestion than an answer, but I think it would be cleaner if you did something like this with css table display instead.
.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>
I've started using this method recently and it's much cleaner than floating, which for layout purposes is almost as as bad as using tables IMO (such controversy, I know). Hope this helps!
Note: this also makes it incredibly easy if you need your columns to all be the same height without having to specify a height for each.
来源：https://stackoverflow.com/questions/25210244/css-columns-not-stacking-correctly