Floating 4 elements left and right in an order
Question
I am having an issue while setting up navigation in an order. I have 4 div tags and it should be in an order as left, right, right, left. so I expect my navigation should look like this
I am having issue with float right. I have tried this
.footer { } li { background-color: yellow; display: inline-block; } .one { background-color: orange; } .two { } .copy { background-color: blue; } .two, .three { float: right; background-color: aqua; clear: right; }
<html> <body> <footer class="footer"> <div class="one" > <img src="https://via.placeholder.com/250x100" alt="footer" /> </div> <div class="two"> <ul> <li>privacy</li> <li>terms and conditions</li> <li>contact us</li> </ul> </div> <div class="three"> <ul> <li>instagram</li> <li>facebook</li> <li>twitter</li> </div> <div class="clear"></div> <div class="copy"> © 2020 mysite.com </div> </footer> </body> </html>
somehow float is not keeping my unordered list to the top. I have searched through the stackoverflow. but I couldn't find any answer. It will be more helpful if I get this work.
1 answers
solution1
1 2020-03-24 04:30:45
If no change div structure, just using display:gird
.footer { display: grid; grid-template-columns: 1fr auto; } li { background-color: yellow; display: inline-block; } .one { grid-area: 1 / 1 / 3 / 2; background-color: orange; } .two { grid-area: 1 / 2 / 2 / 3; } .three { grid-area: 2 / 2 / 3 / 3; } .two, .three { background-color: aqua; text-align: right; } .copy { grid-area: 3 / 1 / 4 / 2; background-color: blue; }
<html> <body> <footer class="footer"> <div class="one" > <img src="https://via.placeholder.com/250x100" alt="footer" /> </div> <div class="two"> <ul> <li>privacy</li> <li>terms and conditions</li> <li>contact us</li> </ul> </div> <div class="three"> <ul> <li>instagram</li> <li>facebook</li> <li>twitter</li> </div> <div class="copy"> © 2020 mysite.com </div> </footer> </body> </html>
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.
Related Question
Order various elements floating on the right
float left floating elements with steps down to the right
Unordered list navigation with floating left and right elements
Right and left floating of odd and even elements
CSS order elements right to left
Align header elements with left middle right order
Floating two elements left and right and centering UL vertically?
Floating an element left after two elements floated right?
Vertically and horizontally aligned elements while floating left and right
CSS Floating Right and Left
Related Tags