I need to add a style to the first occurrence of a class (.border) but not the others.
HTML
<div class="col">
<div>
<div class="border">
<section>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
.col{
padding: 100px;
}
.col section{
display: flex;
justify-content: space-around;
padding: 50px;
}
.col .border{
border: solid;
}
https://jsfiddle.net/stemon/qw9ezu2h/2/
First method
use direct child(>) selector in CSS.
.col > div >.border{
border: solid;
}
.col{
padding: 100px;
}
.col section{
display: flex;
justify-content: space-around;
padding: 50px;
}
.col > div >.border{
border: solid;
}
<div class="col">
<div>
<div class="border">
<section>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
</section>
</div>
</div>
</div>
Second method
simply use .col section .border{} get second and third occurenece of class border to disable border to them by,
.col .border{
border: solid;
}
.col section .border{
border:none;
}
.col{
padding: 100px;
}
.col section{
display: flex;
justify-content: space-around;
padding: 50px;
}
.col .border{
border: solid;
}
.col section .border{
border:none;
}
<div class="col">
<div>
<div class="border">
<section>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
</section>
</div>
</div>
</div>
You should to do this:
.col > div > .border{
... your code...
}
Related
I am trying to get 3 columns in a row and be the same height.
I am using the HTML/CSS below. I can't figure out why the boxes arent the same height.
.container {
text-align: center;
display: block;
width: 100%;
}
.grid {
width: 100%;
height: 100%;
}
.row {
display: flex;
height: 100%;
flex-direction: row;
}
.col {
background: #444;
padding: 2em;
flex: 1;
height: 100%;
border: 1px solid blue;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>
How can I make the boxes all the same height. thanks
Simply, remove the height: 100% from .col.
flex: 1; will do the job.
.row {
display: flex;
}
.col {
flex: 1;
background: #444;
padding: 2em;
border: 1px solid blue;
text-align: center;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>
I am beginner in CSS, I don't understand why my second text isn't at the bottom of the first block?
Why my 2 blocks are horizontally? Normally, the second text must be towards the bottom?!
My structure in HTML seems to be correct?
<div class="container">
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
...
</div>
Thank you in advance for your help and your time.
body{
padding: 0;
margin: 0;
}
.container{
display: flex;
padding-top: 35px;
width: 90%;
margin: 0 auto;
background-color: #f5f5f5;;
justify-content: space-evenly;
align-items: center;
}
.img-icon{
width: 15%;
border-radius: 50%;
background-color: black;
padding: 15px;
}
.col{
display: flex;
width: 25%;
}
.t-title-first{
padding: 15px 10px;
font-size: 25px;
color: blue;
}
.t-title-second{
padding: 15px 10px;
}
<div class="container">
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
You can achieve that by wrapping the text in a simple div.
body{
padding: 0;
margin: 0;
}
.container{
display: flex;
padding-top: 35px;
width: 90%;
margin: 0 auto;
background-color: #f5f5f5;;
justify-content: space-evenly;
align-items: center;
}
.img-icon{
width: 15%;
border-radius: 50%;
background-color: black;
padding: 15px;
}
.col{
display: flex;
width: 25%;
}
.t-title-first{
padding: 15px 10px;
font-size: 25px;
color: blue;
}
.t-title-second{
padding: 15px 10px;
}
<div class="container">
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div>
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div>
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
<div class="col">
<img class="img-icon" src="https://zupimages.net/up/20/13/937l.png" />
<div>
<div class="t-title-first">my first text </div>
<div class="t-title-second">my second text</div>
</div>
</div>
</div>
I have this HTML and CSS:
.container {
width: 100%;
}
.group {
display: flex;
justify-content: space-between;
min-width: 214px;
background: #eee;
}
.abbr {
/* some styling */
}
.name {
/* some styling */
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
</div>
Now, if I use just min-width, the whole div stretches as the entire width of the container. If I just use width, it won't expand if the name is longer than Mark Smith (rather it will go to the next line).
This is what I wanted to achieve:
How do I achieve this in flexbox?
What you're looking for is to apply width: fit-content to .group.
Then you can adjust the offset between the abbreviation and name with min-width on the .abbr.
This can be seen in the following:
.group {
display: flex;
width: fit-content;
background: #eee;
margin: 10px 0;
}
.group > div {
margin: 0 10px;
}
.abbr {
min-width: 50px;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">A Really Really Long Name</p>
</div>
</div>
</div>
I use inline-block on .container so that it won't take up the whole line.
.container {
display: inline-block;
}
.group {
display: flex;
background: #eee;
}
.abbr {
padding: 0 7px;
}
.name {
padding: 0 7px;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
</div><br/><br/>
<div class="container">
<div class="group">
<div class="abbr">
<p>MR</p>
</div>
<div>
<p class="name">Loooooooooooooooong Name</p>
</div>
</div>
</div>
Another solution is to use a third element that consume all the remaining space and set the background color on the text content only:
.container {
margin: 0 0 5px 0;
}
.group {
display: flex;
}
.abbr {
padding: 0 7px;
background: #eee;
}
.name {
padding: 0 7px;
background: #eee;
flex: 0 0 auto;
}
.blank-space{
flex: 1 1 auto;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div class="name">
<p>Mark Smith</p>
</div>
<div class="blank-space"></div>
</div>
</div>
<div class="container">
<div class="group">
<div class="abbr">
<p>MR</p>
</div>
<div class="name">
<p>Loooooooooooooooong Name</p>
</div>
<div class="blank-space"></div>
</div>
</div>
I wish to create a matrix of cells with the names of people. I want to create a 3 by 3 matrix of names. So far I just have one row of names, but I want to add another two rows. I know I can do this using the HTML "tr" and "td" tags, but is there a way I can do this purely using CSS?
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgray}
div {
float:left;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<div>James</div><div>Richard</div><div>Kevin</div>
</body>
</html>
You can try using flexbox:
.flex {
font: 14px Arial;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex > div {
flex: 1 1 auto;
width: 33.3%;
box-sizing:border-box;
border:1px solid black;
text-align:center;
line-height:20px;
padding:5px;
}
<div class="flex">
<div>James</div>
<div>Richard</div>
<div>Kevin</div>
<div>James</div>
<div>Richard</div>
<div>Kevin</div>
</div>
Nice Link to Learn also check the support
CSS3 has columns property:
.divTable
{
-webkit-columns: 1px 3;
-moz-columns: 1px 3;
columns: 1px 3;
}
<div class='divTable'>
<div>James</div><div>Richard</div><div>Kevin</div>
<div>James</div><div>Richard</div><div>Kevin</div>
<div>James</div><div>Richard</div><div>Kevin</div>
</div>
It forms columns first and then rows (all Jameses will go to the first row). But it flexible with regards to the width.
You could keep using div elements and still achieve your 3x3 matrix by just wrapping every row with a div.
.row{
width: 390px;
}
.row div{
float:left;
width: 50px;
padding: 25px;
border: 5px solid black;
margin: 10px;
}
<div class="row">
<div>James</div>
<div>Richard</div>
<div>Kevin</div>
</div>
<div class="row">
<div>James</div>
<div>Richard</div>
<div>Kevin</div>
</div>
<div class="row">
<div>James</div>
<div>Richard</div>
<div>Kevin</div>
</div>
How about this:
<style>
.main div {
float:left;
margin:3px;
width:80px;
height:80px;
background-color:#ccc;
}
.main div:nth-child(3n+1) {
clear:left;
}
</style>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>Heading 1</p>
</div>
<div class="Cell">
<p>Heading 2</p>
</div>
<div class="Cell">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 2 Column 1</p>
</div>
<div class="Cell">
<p>Row 2 Column 2</p>
</div>
<div class="Cell">
<p>Row 2 Column 3</p>
</div>
</div>
</div>
How would one go about making these div flex boxes shrink-wrap?
Ie. making these:
Into these:
http://jsfiddle.net/frank_o/35hk7L84/1/
As if one were to set flex-direction: row; except I can't have them on the same line.
.main {
display: flex;
flex-direction: column;
/* flex-direction: row; */
}
.other {
color: white;
background: blue;
margin: 10px;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello other world</p>
</div>
</div>
Here is what you are looking for (change the display of the individual elements):
.main {
display: inline-flex;
flex-direction:column;
}
.other {
color: white;
background: blue;
margin: 10px;
display:table;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello other world</p>
</div>
</div>
Useful resources: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Other: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can do this using following code.
for more reference and also generating code for flex with all properties you can go through following link
http://code.tutsplus.com/tutorials/an-introduction-to-the-css-flexbox-module--net-25655
http://the-echoplex.net/flexyboxes/
.main {
display: inline-flex;
flex-direction: column;
}
.other {
color: white;
background: blue;
margin: 10px;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello world</p>
</div>
</div>
You will get what do u need that is every element having different size with shrinking itself as width of element but without using flex.
.other {
clear:both;
color: white;
background: blue;
margin: 10px;
float: left;
}
<div class="main">
<div class="other">
<p>H</p>
</div>
<div class="other">
<p>Hello world </p>
</div>
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello</p>
</div>
<div class="other">
<p>Hello world12345678</p>
</div>
</div>
I've had sucess with the following:
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;