当前位置: 动力学知识库 > 问答 > 编程问答 >

html - CSS Display:Inline-Block Pairs

问题描述:

I need a CSS only solution to make pairs of <a> tags inline, but not all in a row. For example, in this JSFiddle http://jsfiddle.net/vLakfsLv/, I want two rows of two black squares.

<div>

<a></a>

<a></a>

<a></a>

<a></a>

</div>

a{

width:100px;

height:100px;

display:inline-block;

margin-right:20px;

background-color:black;

}

Obviously you can do this by wrapping the <a> tags with <div>s but I need a CSS hack. I cannot edit the HTML.

EDIT:

Please don't accomplish this with width because the width is constantly changing.

网友答案:

Float everything to the left, make your third <a> tag (using a:nth-child(3)) clear the floats to the left. here's a fiddle

网友答案:

Why not display:block and float:left to the <a> and a clear:left to the correct nth-child ?

( you didn't say you needed IE* support )

网友答案:

Try this:

a{
    float: left;
}
a:nth-child(odd){
    clear: both;
}
div {
    overflow: hidden; /* Clear float */
}

Demo

网友答案:

you could give them margins, specifically left or rights, and/or give the surrounding div (of the four blocks) a set width. they will adjust to that.

网友答案:

Try this solution:

div {
    width: 240px; /* 100 + 20 + 100 + 20 */
    font-size: 0; /* To avoid additional space */
}

Demo

You don't need font-size: 0 if you get rid of spaces in between elements:

<div><!--
    --><a></a><!--
    --><a></a><!--
    --><a></a><!--
    --><a></a><!--
--></div>
网友答案:

you can use float like this:

a{
    width:100px;
    height:100px;
    float: left;
    margin-right:20px;
    margin-bottom: 20px;
    background-color:black;
}
a:nth-child(3n){
    clear:both;
}

http://jsfiddle.net/vLakfsLv/8/

分享给朋友:
您可能感兴趣的文章:
随机阅读: