How to make two divs show side by side, two divs show side by side
Some time ago, when I was working on the interface, I wanted to implement a two-DIV side-by-side interface. Before doing this, I thought it was quite simple. I just needed to float a div. Then I tested it. Below is some code
Test code by yourself
<span style="font-size:18px;"><body> <div style="background-color:red;width:200px;">DIV1</div> <div style="background-color:yellow;width:200px;float:right">DIV2</div></body></span>
The sum of the two div widths is smaller than the width of the page. What is the test result?
Failed, but it was changed to left floating, or not. What should we do? Or online query...
Solution
I have to say that with the network, This omniscient teacher, it is too helpful to us. Two solutions are obtained after query.
First
The first method is floating, but the two divs must both be floating. It seems to be a thousand miles away! Next, let's try the effect.
1. left floating code
<span style="font-size:18px;"><body> <div style="background-color:red;width:200px;float:right;">DIV1</div> <div style="background-color:yellow;width:200px;float:right">DIV2</div></body></span>
Effect
2. One floating left and one floating right code
<span style="font-size:18px;"><body> <div style="background-color:red;width:200px;float:left;">DIV1</div> <div style="background-color:yellow;width:200px;float:right">DIV2</div></body></span>
Effect
Okay. Let's take a look at the second red solution.
Second
Set the display: inline attribute for both Divs.
Code
<span style="font-size:18px;"><body> <div style="background-color:red;width:200px;display:inline"">DIV1</div> <div style="background-color:yellow;width:200px;display:inline">DIV2</div></body></span>
Effect
Yes, it succeeds, but the width attribute of the two divs is invalid. You can adjust the specific style.
Summary:
There is always something we don't understand in the process of moving forward. If you cannot solve the problem, you can ask our Internet teacher to help us solve the problem.