Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to create two highly identical div elements side by side in CSS. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Answer: use CSS3 flexbox

Using the CSS3 flex layout model, you can easily create equal-height columns or elements aligned side by side. Simply apply the flex attribute of display with the value flex on the container element and the attribute of 1 on the child element.

Let's try the following example to understand how it works:

Try this code for example »

Creating Two Equal Height Columns with CSS

. flex-container {

Width: 80%

Min-height: 300px

Margin: 0 auto

Display:-webkit-flex; / * Safari * /

Display: flex; / * Standard syntax * /

}

. flex-container .column {

Padding: 10px

Background: # dbdfe5

-webkit-flex: 1; / * Safari * /

-ms-flex: 1; / * IE 10 * /

Flex: 1; / * Standard syntax * /

}

. flex-container. Column.bg-alt {

Background: # b4bac0

}

Column 1

Column 2

This is the end of this article on "how to create two highly identical div elements side by side in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.