I use react js
I usually face problem like this
<div style={display: 'flex'}>
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>
Let's assume above element had styled finished.
Then start to make rwd style
The problem is here.
I usually found that I need added new element to wrap it because I need to make rwd style.
Like this
<div style={display: 'flex'}>
<div> // add this element
<div>Content 1</div>
<div>Content 2</div>
</div>
<div>Content 3</div>
</div>
Then, I need to change style that I had finished, because I added new element.
Do any better way to avoid that?
Actually, you can use a tag selector such as div to select all the divs in your document or component in react context. While it is not the best way to handle it will work.
Related
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.
wanna know is there a way to do this:
<div class="booth">
<div class="part">Part 1</div>
<div class="part">Part 2</div>
<div class="part">Part 3</div>
<div class="part">Part 4</div>
</div>
Using the :hover on css i expand the size of an inner div to a height:100% width:100% from the .booth class. I have the problem that the title of each part is visible over the full size.
it's difficult to explain...i know, and my english is not good....
I think your taking about having either of the 4 div expand to the full size of the parent div and overlap the other child divs. I would try using the z-index property on the "part" class instead of the booth to resolve it.
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'm making a 2-column layout with divs.
It should be something like this: http://dl.dropbox.com/u/4976861/html-demo.html
But there is a problem. If content stretches the side blocks vertically, the left blocks shift downwards: http://dl.dropbox.com/u/4976861/html-demo-2.html
If I put the sidebar into a wrapper div, it works fine, but it will make the code quiet messy because of the paddings and some background issues which I removed to simplify the demo, so I would like to leave this option for now.
I don't think that you're going to be able to produce the results that you would like without changing the underlying HTML. You're trying to allow elements to flow (both vertically and horizontally) within the page, but the order in which you have the elements is not going to allow this.
I might be teaching you to suck eggs, but my preference for the HTML output would be something like this:
<div class="wrap">
<div class="column1">
<div>left 1</div>
<div>left 2</div>
<div>left 3</div>
</div>
<div class="column2">
<div>right 1</div>
<div>right 2</div>
</div>
</div>
Put this under the 2 divs:
<div style="clear:both;"></div>
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.