/*rex is the container of ex,ex2,ex3*/div.rexheight:200px;border:0px;margin:60px auto;padding: 0;vertical-align:top;div.exwidth:34%;height:200px;background-color:#4f443a;display:inline-block;margin: 0;padding: 0;vertical-align:top;div.ex2width:0.5%;height:200px;display:inline-block;margin: 0;padding: 0;vertical-align:top;div.ex3width:65.5%;height:200px;background-color:#7e8547;display:inline-block;margin: 0;padding: 0;vertical-align:top;The an outcome in browser:
What ns need:
This is in reality expected actions in HTML. Due to the fact that you room using inline-block, any kind of newline character or whitespace you have actually after the element and before an additional inline element, will be counted as a space. If you want the blocks to stack side by side choose in your picture, your HTML would should be like this.
You are watching: Display inline-block not working
It"s not very pretty, however then again, I would certainly recommend using another approach, maybe floating the facets instead.
Refer to below for a more in depth explanation of why this occurs.
How to remove the an are between inline-block elements?
You have actually repeated the css code unnecessarily. You have the right to minify it by utilizing multiple css favor :
.ex, .ex2, .ex3 display: inline-block; vertical-align: top; margin: 0; padding: 0; height: 100%; /* no need of height: 200px; here */ /* if you need to prolong it come parent height */ /* then usage height: 100% */OR
div.rex > div /* code below */ You deserve to keep aspects side by side by using any of the below approaches:
Add float:left; to her div.ex, div.ex2 and also div.ex3 instead.
UPDATE:Add position:absolute to second and 3rd div if rise is not a choice.
UPDATE 2:Add this to only third div if you require that space in between.
My cheat is to collection font-size:0; in the parent element, since it"s the font-size the is leading to the math to not add up perfectly ( around a 4px overlap every div, depending upon screen size ) and also causes one div to show up under the other.
.rexdisplay:block;font-size:0;.exwidth:34%;height:200px;background-color:#4f443a;display:inline-block;vertical-align:top;margin: 0 .5% 0 0; /*small room between divs*/padding: 0;font-size:16px; /*restore font size*/.ex2width:65.5%;height:200px;background-color:#7e8547;display:inline-block;vertical-align:top;margin: 0;padding: 0;font-size:16px;
many thanks for contributing an answer to ridge Overflow!
But avoid …Asking for help, clarification, or responding to various other answers.Making statements based upon opinion; ago them up with recommendations or an individual experience.
See more: How Far Is Beaumont From Houston, Tx To Beaumont, Tx, Distance Between Houston, Tx And Beaumont, Tx
To discover more, see our advice on writing an excellent answers.
write-up Your prize Discard
Not the prize you're feather for? Browse various other questions tagged html css or questioning your very own question.
site architecture / logo © 2021 ridge Exchange Inc; user contributions licensed under cc by-sa. Rev2021.11.17.40778