Clever Geek Handbook

Child div with border constraint on browser shutdown

#container{width:100px; height:200px; border:solid 1px #000;}

#container div{float:left;}

#a, #b{width:50px; height:50px;}
#a{background:red;}
#b{background:yellow;}

#c, #d{width:48px; height:48px; border:solid 1px #000;}
#c{background:blue;}
#d{background:green;}

// no border

<div id="container">
    <div id="a"></div>
    <div id="b"></div>
</div>

// with border

<div id="container">
    <div id="c"></div>
    <div id="d"></div>
</div>

I have 2 divs inside a container, both float left

However, if I add a border to small divs,

When the browser zooms out, the div will move down and destroy the layout

I am trying borderless and the layout works fine without border.

Does anyone know how to achieve this with a border div?

Here is a violin

+3


source to share


1 answer


you need to install:

Box-sizing: Border-box;

he says the border grows on the inside, not the outside, so it doesn't change the layout.
also change the window width to 50px.



PS: jsfiddle doesn't recognize this property, but displays it as needed.

+5


source






More articles:


All Articles