with Tailwind css i am trying to align image and text on both sides, not matter how the text is image and text started position should not change. can you please tell me what i am missing or doing wrong.
Code: https://play.tailwindcss.com/kFSxJ8tMdD
May be you can try this.
Use content-start to pack rows in a container against the start of the cross axis:
<div class="h-48 flex flex-wrap content-start ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-center to pack rows in a container in the center of the cross axis:
<div class="h-48 flex flex-wrap content-center ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-end to pack rows in a container against the end of the cross axis:
<div class="h-48 flex flex-wrap content-end ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-between to distribute rows in a container such that there is an equal amount of space between each line:
<div class="h-48 flex flex-wrap content-between ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-around to distribute rows in a container such that there is an equal amount of space around each line:
<div class="h-48 flex flex-wrap content-around ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-evenly to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around:
<div class="h-48 flex flex-wrap content-evenly ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Related
As you see in this image.
I makes this design with display flex using CSS3
All I want is that make number 5 and 10 same width, but not fixed width but makes number 10 takes its width from number 5 and vice versa.
.flexed{
width:100%;
}
.flexed .flex{
display:flex;
}
.flexed .flex div{
width:100%;
}
<div class="flexed">
<div class="flex head">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>text text text text</div>
</div>
<div class="flex body">
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
Your problem can be solved using CSS grid, no need to use flexbox since your problem is based on a 2 Dimensional layout
.container {
width: 100%;
}
.container .grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: auto;
grid-gap: 10px
}
.container .grid div {
border: 1px solid red;
padding: 10px;
}
<div class="container">
<div class="grid head">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum obcaecati beatae, exercitationem delectus neque suscipit corporis animi aspernatur. Dolor maxime, facilis labore aut inventore esse possimus a sunt voluptatum fuga?</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
I hope this solves your query.
I think you need something like this, But why the width of your flex items are 100%?
.flexed{
width:100%;
}
.flexed .flex{
display:flex;
}
.flexed .flex div{
overflow: hidden;
flex: 1 1 0px;
}
<div class="flexed">
<div class="flex head">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>text text text sdvsdvsvsdvsdtext</div>
</div>
<div class="flex body">
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
I hope it helps.
<div class="row">
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
</div>
How can i apply CSS on 1st column of each 4*4 grid
I try this
.row div:nth-child(4n+0) {
margin-left: 0px;
}
Note: I need only CSS solution for this
see image here
div {
float:left;
height:100px;
width:25%;
background-color:pink;
margin-bottom:10px;
}
div:nth-child(4n-3) {
background-color:green;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
Use "First-child" Pseudo class
CSS Codes
div p:first-child{
color:red;
}
HTML codes
<div>
<p>first </p>
<p>second</p>
<p>third </p>
<p>fourth </p>
</div>
<div>
<p>first </p>
<p>second</p>
<p>third </p>
<p>fourth </p>
</div>
<div>
<p>first </p>
<p>second</p>
<p>third </p>
<p>fourth </p>
</div>
it will change the color of only first paragraph.
Hello I need to get CSS selector after active class, for example:
if I have 7 div and one of them have active class I need to get the fourth element after active class.
<div>1</div>
<div class="active">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div> <!-- I need to get this selector -->
<div>7</div>
You could use + selector
.active + div + div + div + div {
background:red;
}
<div>1</div>
<div class="active">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div> <!-- I need to get this selector -->
<div>7</div>
I need a selector that will select everything in the X class, except for the Y class objects. Maybe my problem would solve the selector /deep/ but it is not supported.
I have a page structure:
<div class="x">
<div class="y"></div>
<div>
<div>
<div>
<span class="y"></span>
<div>1</div>
<label class="y"></label>
<div>
<span class="y"></span>
<p>2</p>
</div>
</div>
</div>
</div>
<div>
<span class="y"></span>
<div>3</div>
</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>6</div>
</div>
I need a selector or xpath that will select:
<div>1</div>
<p>2</p>
<div>3</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>6</div>
I need a general solution.
This XPath,
//div[#class="x"]//*[not(#class="y") and not(.//*[#class="y"])]
will select all div[#class="x"] descendants that do not have a #class="y" attribute and do not have any descendants that have #class="y" elements,
<div>1</div>
<p>2</p>
<div>3</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>4</div>
<div>
<div>5</div>
</div>
<div>5</div>
<div>6</div>
which matches your example if we assume that your example was incomplete.
There is the :has(...) pseudo-class but it cannot be used in stylesheets for performance reasons. This limitation is baked into CSS engines for all browsers because every time they render web pages, they traverse through the entire DOM and apply selectors that match the existing element (and hence haven't yet looked at their children). Instead this pseudo-class is typically used for dedicated selector engines such as Sizzle (known by its development/use for jQuery).
If you wanted to use that pseudo-class, then you could try :not(.y):not(:has(.y)). Then in order to get the topmost results, I select children only of elements that did not match (ie. :has(.y) > :not(:has(.y))). The one caveat comes if an element with class "y" has children. The only way to handle that is to repeat the pseudo-class specifying :not(.y) for as many levels deep that you want to go (I didn't do this). Here's a live example:
// The selector
var elements = $('.x > :not(.y):not(:has(.y)), .x :has(.y) > :not(.y):not(:has(.y))');
// Format the HTML
var html = elements.map(function(){
var dirty = this.outerHTML;
// Get leading whitespace to remove
var leading = (dirty.match(/\r?\n *(?= {4})/) || ['\r\n'])[0];
// Create regex to replace whitespace
var leading = new RegExp(leading.replace(/\r/,'\\r?').replace(/\n/,'\\n'), 'g');
// Show newlines, whitespace in HTML
var cleaned = $('<div>').text(dirty).html().replace(leading, '<br/>').replace(/ /g, ' ');
return cleaned;
}).toArray();
// Add the HTML to the page
var results = $('#results');
for(var i=0; i<html.length; i++) {
results.append($('<li>').html(html[i]));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Sample HTML -->
<div class="x">
<div class="y"></div>
<div>
<div>
<div>
<span class="y"></span>
<div>1</div>
<label class="y"></label>
<div>
<span class="y"></span>
<p>2</p>
</div>
</div>
</div>
</div>
<div>
<span class="y"></span>
<div>3</div>
</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>6</div>
</div>
<h3>Results</h3>
<ol id="results" class="y"></ol>
I want to select all elements with one selector, starting from the 4th. But I dont want to select that 4th, if it is the last element.
.container div {
display: inline-block;
margin: 5px;
}
.container div:nth-child(n+4):not(:nth-child(4):last-child) {
background: red;
}
<div class="container">
<div>1</div>
<div>2</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
jsfiddle:
https://jsfiddle.net/e9fgdeu1/
I think only one selector is not enough to get this. However it can be done with following selector:
.container div:nth-child(n + 5),
.container div:nth-child(4):not(:last-child) {
background: red;
}
.container div {
display: inline-block;
margin: 5px;
}
.container div:nth-child(n + 5),
.container div:nth-child(4):not(:last-child) {
background: red;
}
<div class="container">
<div>1</div>
<div>2</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
.container div {
display: inline-block;
margin: 5px;
}
.container div:nth-child(n+4) {
background: red;
}
.container div:nth-child(4):last-child {
background: none;
}
<div class="container">
<div>1</div>
<div>2</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>