变更< div>位置只有.css编辑 [英] change <div> location with just .css edit
问题描述
有4 < div class =myField> 各一个在下面 -
Having 4 <div class="myField"> each one below the other -
strong> http://jsfiddle.net/urielz/6Mdmd/
http://jsfiddle.net/urielz/6Mdmd/
我想把它的视图改成两张面对面 - 像结果 -
I want to change its view to be two couple of face each other - like the result in -
< a href =http://jsfiddle.net/urielz/q8EK5/ =nofollow> http://jsfiddle.net/urielz/q8EK5/
http://jsfiddle.net/urielz/q8EK5/
但需要，只需编辑 .css - 保持相同< body> 。
but with the requirement that it would be with just edit the .css - mean keep on same <body> .
我该怎么办？
推荐答案
您可以使用以下CSS：
You could use the following CSS:
.myField {
float: left;
}
.myField:nth-child(2n+1) {
clear: both;
}
第一个规则将浮动元素。第二条规则说，每2个元素之后的元素将清除浮动，意味着它将落到下一行。
The first rule will float the elements. The second rule says that the element after every 2 elements will clear the float meaning it will fall to the next line.
如果你决定你想要每行3个可以轻松修改此值以适应：
If you then decided you wanted 3 per row you could easily modify this to accommodate:
.myField:nth-child(3n+1) {
请注意这使用CSS3选择器因此不会在IE8或以下工作，而不使用像selectivizr： http://selectivizr.com/
Please be aware this uses CSS3 selectors therefore won't work in IE8 or below without using something like selectivizr: http://selectivizr.com/
这篇关于变更< div>位置只有.css编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
