gap between two 50% width divs

问题

I have a container <div> with a width of 181px.

I have two child <div> elements in my container div each with a width of 50%.

My problem is that each of my child <div> elements has a width of only 90px, resulting in a 1px gap between the two.

Any suggestions for removing the gap?

回答1:

Set the width of one div as 50% and the other can use the standard block behavior of consuming the rest of the width:

<div style="width: 181px;">
    <div style="width: 50%; float: left;"></div>
    <div></div>
</div>

回答2:

style them as floats?

<div style="width:181px;border:1px solid;height:100px;">
    <div style="width:50%;background:#F00;height:100%;float:left;"></div>
    <div style="width:50%;background:#00F;height:100%;float:left;"></div>
</div>

回答3:

You can't split 181 pixels in half. A pixel is a pixel on a display and you can't get 2 50% elements to split the 181px in half. One needs to be 90px and one needs to be 91px.

If you float them both to the same direction, either left or right, the gab between them would go away but you would probably still have a 1px gap on the other side--if that matters. If you have borders on these elements and you're using floats then you'll have a whole new set of cross-browser issues. Make sure you do some cross-browser testing.

回答4:

Well the value get rounded to integer.

Here is a very good thread which goes into much more detail.

Are the decimal places in a CSS width respected?

来源：https://stackoverflow.com/questions/7369720/gap-between-two-50-width-divs