I have 6 individual divs as so although it is possible to have more than 6 children divs. What I am trying to achieve is alternating background colors. So first 3 div will have a white background, next 3 - a black background, the next 3 - white again, next three - black again, etc.
<div class="parent">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
<div class="child">child 4</div>
<div class="child">child 5</div>
<div class="child">child 6</div>
</div>
I have tried a few ways with nth-child selector but haven't been able to achieve this pattern. Thanks much.
Related
I'm trying to make the following grid:
Unfortunately it's not working for me right now. I don't know how to position containers to fill the empty space next to each other.
This is just an example to demonstrate: https://jsfiddle.net/7m2bfx65/2/.
<div class="container">
<div class="row">
<div class="col-6">Container 1</div>
<div class="col-6">Container 2<br/>Container 2<br/>Container 2</div>
<div class="col-6">Container 3<br/>Container 3<br/>Container 3<br/>Container 3<br/>Container 3</div>
<div class="col-6">Container 4<br/>Container 4<br/></div>
<div class="col-6">Container 5</div>
<div class="col-6">Container 6</div>
</div>
<div class="row">
<div class="col">Container 7<br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>
</div>
As you can see, Container 3, 5 and 6 are not positioned correctly and Container 1 and 4 have different heights.
If you know how to fix it, I really appreciate your help. I also prefer to use Bootstrap 4 Flex grid system.
Is there a way to make the collapsible row colspanned to the number of columns? Or at least have the full width as of the div table? I stumbled upon this but it doesn't seem to help.
You may check out the full code here in this jsfiddle.
<div class="div-table">
<div class="div-heading">
<div>Head 1</div>
<div>Head 2</div>
<div>Head 3</div>
<div>Head 4</div>
<div>Head 5</div>
<div>Head 6</div>
</div>
<div class="div-row">
<div class="cell">col 1</div>
<div class="cell">col 2</div>
<div class="cell">col 3</div>
<div class="cell">col 4</div>
<div class="cell">col 5
</div>
<div class="cell">col 6</div>
</div>
<div class="div-row div-row-collapsible">
<div class="collapse text-center" id="row1">must be full width</div>
</div>
Wrap the whole thing in another div.
<div>
</div>
See here:
http://jsfiddle.net/5x8wu0sc/
I only updated the html.
The whole width available to your div containing the text "must be full width" end where the second column cell of your table should start. This seems to be aa a consequence of the display='table' used in the main div. You can't use a colspan to enlarge over the first column as explained here : Colspan/Rowspan for elements whose display is set to table-cell
I think you have to consider using bootstrap grid system. It should give you an easy way to have table stuff well done.
I am trying to arrange 8 tables in two rows.I have two divs alligned horizontally I am trying to align
4 tables in rows 1
4 tables in row 2
When I try to put this below code inside another [left] DIV container. All the tables go in one line. Below is the code that I am using.
<div class="datagrid"><table>
<thead><tr><th>header</th><th>header</th></tr></thead>
<tbody><tr><td>data</td><td>data</td></tr>
<tr class="alt"><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td></tr>
<tr class="alt"><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td></tr>
</tbody>
</table></div>
Kindly guide me on this issue. If required I can upload complete code that I am using.
You could achieve that by adding a parent container to the first 4 tables and another one to the next 4, like so:
<div class="group">
<div class="datagrid">table 1</div>
<div class="datagrid">table 2</div>
<div class="datagrid">table 3</div>
<div class="datagrid">table 4</div>
</div>
<div class="group">
<div class="datagrid">table 1</div>
<div class="datagrid">table 2</div>
<div class="datagrid">table 3</div>
<div class="datagrid">table 4</div>
</div>
Then, add these style rules:
.datagrid {
float: left;
}
.group {
clear: both;
}
Use the float and clear.
Find the Complete code in jsfiddle
Js Fiddle
css style
.datagrid{
float:left;
}
.firstRow{
}
.secoudRow{
clear:both;
}
I have this HTML code with applied CSS.
I need all div with cnt-list-box in red but ONLY the LAST div cnt-list-box with different color.
Any ideas?
<div class="cnt-box-1">
<div class="cnt-list-box">content 1</div>
<div class="cnt-list-box">content 2</div>
<div class="cnt-list-box">content 3</div>
<div class="cnt-list-box">content 4</div>
<div class="cnt-list-box">content 5</div>
</div>
.cnt-list-box
{
background-color:Red;
}
your example does work in FF and Webkit:
http://jsfiddle.net/meo/hwFYT/
As commented by usoban you should check:
Changing CSS for last <li>
PS: your incode comment is not a valid CSS comment. It produces a parsing error this is why it seams to work, but its no a good practice.
Fortunately I found by myself a reasonable solution to my problem.
.cnt-box-1 > .cnt-list-box:last-child
{
background-color: Blue;
}
I'd like to create two column layout for my list using CSS.
Let's say I have 5 items, the presentation would be:
<item 1> <item 4>
<item 2> <item 5>
<item 3>
How can I do this with HTML and CSS? Keep in mind that the list length is variable.
I'll be generating the HTML server side using C#, that will provide more flexibility.
I finally made up my mind and use two floated DIVs to achieve this layout.
The server side code will iterate the items and create a new DIV if it passes the halfway point (current index >= half of length).
The resulting HTML would look like the following:
<div class="container">
<div class="column">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="column">
<div>Item 4</div>
<div>Item 5</div>
</div>
<div style="clear: both"></div>
</div>
CSS:
.column { float: left; }
The server side will determine when to close and create a new DIV. Not pretty, but it works.