Home > Article > Web Front-end > How to set up two different contents on the same line_html/css_WEB-ITnose
How to set up two different contents on the same line_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:041950browse
As shown in the picture, when all the content is centered, there are different contents on the same line. For example: college news and notification announcements are on the same line. How to set this up? Only use CSS, no need to js.
Reply to discussion (solution)
Set the width of each div, then float one left (float:left) and one float right (float :right), that’s it
You have to understand CSS layout:
1. Default layout (elements are arranged from left to right, top to bottom);
2. Floating layout (column layout )
3. Positioning layout.
To solve the problem you raised, you need to use floating layout:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"> /* reset */ * { padding: 0; margin: 0;} /* main */ .main {width: 600px; overflow: hidden; background-color: #f1f1f1; margin: 20px auto; } .main-left {float: left; width: 400px; background-color: green; } .main-right {float: right; width: 200px; background-color: blue; } .news { } .notice {}</style></head><body> <div class="main"> <div class="main-left"> <div class="news"> news <br> news <br> news <br> news <br> news <br> news <br> news <br> </div> </div> <div class="main-right"> <div class="notice"> notice <br> notice <br> notice <br> notice <br> notice <br> notice <br> notice <br> </div> </div> </div></body></html> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Dimensions of web design_html/css_WEB-ITnoseNext article：Dimensions of web design_html/css_WEB-ITnose