Take this HTML:
<div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class=开发者_JAVA技巧"block">Hello</div>
</div>
With the companion CSS:
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 1px;
background: red;
}
The result of this is four blocks, which have between them 2 pixels of space (1px from the right margin of the left block and 1px from the left margin of the right block).
Is there a way that I can achieve a similar effect to border-collapse? ie. I want there to be only one pixel of margin between adjacent blocks.
This is a basic example of often more complex situations that I run into, and I don't want to get around it by by anything similar to only setting margin-left
to 1 pixel etc.
There are multiple ways to this
One of them is
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 1px 1px 1px 0;
background: red;
}
div.block:last-child {
margin: 1px 0 1px 0;
}
Another is
div.block+div.block { margin-left: 1px; }
You can check the demo of both way here
How about using the CSS selector :first-child
and :last-child
to alter the first and last <div>
?
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 2px 1px 2px 0;
background: red;
}
div.block:first-child {
margin-left: 2px;
}
div.block:last-child {
margin-right: 2px;
}
If you can alter the markup itself, then I guess we can have a cross browser compatible solution:
<div class="block"> <div class="block_2"></div> </div>
and then apply the css like:
div.block{float: left; width: 100px; height: 100px; }
div.block_2{width:99px; height:100px; background-color:red}
Assign a class for last block called 'last'. The set margin-right of every block to 1px. Set margin-right of block that has last class to 0. .block.last { margin-right: 0px; }
Pseudo selectors like forst-child and last-child are not well supported so I think this is the best option you have.
精彩评论