display:inline-block with border?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<style type="text/css">
body { margin:0;padding:0;}
</style>
</head>
<body>
<div>
<div style="width:1000px;margin:0 auto;">
<div style="width:700px;display:inline-block;">1</div>
<div style="width:300px;display:inline-block;">2</div>
</div>
</div>
</body>
</html>I want these blocks flush, but currently the second block is pushed down.. If I change the width of second block to 296px then it works..
I don't want to use float:left because it will require one more block with clear:both;.
This is what you have at the moment, but reduced in size:
I don't want to use float:left because it requires one more block with "clear:both;".
With float: left, you can clear/contain the floats without adding an element with clear: both. You can do this by adding overflow: hidden (or clearfix) on the parent element.
- Without
overflow: hidden - With
overflow: hidden
If you want to stick with display: inline-block..
The first thing you need to do is remove the whitespace between the two divs.
- With whitespace
- Without whitespace
If you want to add a border, you can add wrapper elements and add the borders to that.
Or, you can use box-sizing: border-box as shown here.
If you want to use 2 elements in line (1000px total for 300+700px) - just set font-size:0 for container. This is very logical in this case and now you can use all benefits from inline-blocks, like align:justify!
You can only give display:inline-block to elements that are naturally inline (e.g. span, a) Otherwise your element won't render correctly in older browsers (e.g. IE7-)
Include the width of the border in the width of the div.
If you want it to appear 300px wide on the screen, make it 298px (+1px for the left border, +1px for the right border = 300px). This is also true for padding.
Read up on the w3 box model versus the IE box model.
加载中,请稍侯......
精彩评论