How to set up two different contents on the same line_html/css

How to set up two different contents on the same line_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:45:04

Original

1947 people have browsed it

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>

Copy after login