how can i add another div which will cover all the space present in the right side of .left, .mid and .right?
Question
Hello there i want to add one more div on the right side of 3 divs ie left, right and mid, i am new to CSS, also if you could then please also explain how to position complex div designing, or please share a link to resource which elaborates this concept easily Here is my complete source code.. Here is the output
<html>
<head>
<title>Template</title>
<style>
body {
background-color: black;
}
.top, .left, .right, .mid, .bottom {
margin: 5px;
background-color: plum;
padding: 5px;
}
.left, .right, .mid {
width: 30%;
}
</style>
</head>
<body>
<div class="top">
<p>Top</p>
</div>
<div class="left">
<p>Left</p>
</div>
<div class="mid">
<p>Mid</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div class="bottom">
<p>Bottom</p>
</div>
</body>
</html>
1 answers
solution1
0 2017-05-26 18:34:43
You can create a flex row with 2 flex children and put the left/mid/right elements in the left flex child set to the flex-basis you want those to occupy, then set the other flex child to flex-grow: 1 . I'm using the shorthand properties in this code.
body { background-color: black; } .top, .left, .right, .mid, .bottom, .panel2 { margin: 5px; background-color: plum; padding: 5px; } .flex { display: flex; } .panel1 { flex: 0 0 30%; } .panel2 { flex: 1 0 0; background: blue; }
<div class="top"> <p>Top</p> </div> <div class="flex"> <div class="panel panel1"> <div class="left"> <p>Left</p> </div> <div class="mid"> <p>Mid</p> </div> <div class="right"> <p>Right</p> </div> </div> <div class="panel panel2"> foo </div> </div> <div class="bottom"> <p>Bottom</p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.