.container {
display: flex;
}
.item {
background: #ce8888;
flex-basis: 100px;
height: 100px;
margin: 5px;
}In this solution we use display:
flex style property for our wrapping <div> element,
so in both children divs we can set flex: property
value with 1 to display two equal size <div> elements n
ext to each other.
ex :
<html>
<head>
<style>
div {
border: 1px solid red;
}
div.container {
display: flex; /* <---------- required */
}
div.child {
flex: 1; /* <---------------- required */
}
</style>
</head>
<body>
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
</div>
</body>
</html>| Code Example |
|---|
| Css :: center ul |
| Css :: Media Query smartphone only |
| Css :: repeating-linear-gradient generator |
| Css :: css pointer event |
| Css :: textarea disable resize |
| Css :: how to round the edges of a box html |
| Css :: canvas disable antialiasing |
| Css :: css checkbox':checked change color |
| Css :: css bold |
| Css :: kill docker by image name |
| Css :: cool hover effects css |
| Css :: remove the outline from bootstrap input and input fields |
| Css :: how to remove bullet in css |
| Css :: css attribute selector |
| Css :: vertical padding css |
| Css :: ellipsis css |
| Css :: template html css bootstrap cdn |
| Css :: text-overflow: ellipsis 2 lines |
| Css :: can span have width |
| Css :: line middle text css |
| Css :: sql file extension |
| Css :: import antd css |
| Css :: css opacity |
| Css :: grid css |
| Css :: stop css transition from firing on page load |
| Css :: @fontface otf |
| Css :: scss how to use a variable in entire angular project |
| Css :: css cut lines |
| Css :: icon borders css |
| Css :: change background color on hover |