Would somebody be able to tell me why the div
s in this JSFiddle (Bootstrap CSS imported) are not side by side when the string of text in the second div
is longer? I appreciate you taking the time to help me.
https://jsfiddle.net/DTcHh/13602/
<div class="container">
<div class="row">
<div class='col-md-12'>
<div style='display:inline-block;border:1px solid purple;'>
whatever
</div>
<div style='display:inline-block;border:1px solid red;'>
Why the heck do the divs stack on top of each other when this line gets really long? I would think they would be side by side because the display property of the div is set to inline block
</div>
</div>
</div>
</div>
Flexbox actually served me proper, thank you for your help.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
<div class="container">
<div class="flexcontainer">
<div style='width: 50px; border:1px solid purple;'>
whatever
</div>
<div style=' border:1px solid red;'>
Why the heck do the divs stack on top of each other when this line gets really long? I would think they would be side by side because the display property of the div is set to inline block
</div>
</div>
</div>
</div>
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras