El propósito de este artículo es dividir el texto en dos columnas usando la propiedad de columna CSS . Esta propiedad se utiliza para establecer el número de columnas y el ancho de estas columnas.
Sintaxis:
columns: column-width columns-count | auto | initial | inherit;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
color: green;
}
.GFG {
-webkit-columns: 40px 2;
/* Chrome, Safari, Opera */
-moz-columns: 60px 2;
/* Firefox */
columns: 60px 2;
}
</style>
</head>
<body>
<h1>
How to divide the text in the division
element into two columns using css?
</h1>
<div class="GFG">
<h2>Welcome to the world of Geeks!!</h2>
How many times were you frustrated while
looking out for a good collection of
programming/algorithm/interview questions?
What did you expect and what did you get?
This portal has been created to provide well
written, well thought and well-explained
solutions for selected questions.
<p>
<strong>Our team includes:</strong>
<p>
Sandeep Jain: An IIT Roorkee alumnus
and founder of GeeksforGeeks. He loves
to solve programming problems in most
efficient ways. Apart from GeeksforGeeks,
he has worked with DE Shaw and Co. as a
software developer and JIIT Noida as an
assistant professor.
</p>
<p>
Vaibhav Bajpai: Amazed by computer
science, he is a technology enthusiast who
enjoys being a part of a development. Off
from work, you canfind him in love with
movies, food, and friends.
</p>
<p>
Shikhar Goel: A Computer Science graduate
who likes to make things simpler. When he's
not working, you can find him surfing the web,
learning facts, tricks and life hacks.
He also enjoys movies in his leisure time.
</p>
<p>
Dharmesh Singh: A software developer who
is always trying to push boundaries in search
of great breakthroughs. Off from his desk,
you can find him cheering up his buddies
and enjoying life.
</p>
<p>
Shubham Baranwal: A passionate developer
who always tries to learn new technology and
software. In his free time, either he reads
some articles or learns some other stuff.
</p>
</div>
</body>
</html>
Producción:
Los navegadores compatibles se enumeran a continuación:
- Google Chrome 43.0
- Internet Explorer 10.0
- Firefox 16.0
- Ópera 30.0
- Safari 9.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA