DIV width to content of other DIVs, floating and centering all
Question
I would like to achieve something that initialy looked simple to me but turned out to be not.
My code is:
<html>
<head>
<style>
div {
border-top: 1px solid black;
margin: 10px;
}
div#all {
border: 0;
}
</style>
<body>
<div id=all>
<div class=first>First</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
</div>
</body>
</html>
What I'd like to get is all DIVs in "content" class are inline-blocks (or floats) set one after another from left to right.
The "rowstarter" class is the same but has to clear the before floats (start a new row).
The "first" DIV has to have a width equal to the content below (so if the window width allows the browser to display 5 "content" DIVs in a row, each having 100px width then "first" has 5 * 100px + 5 * (2 * 10px [margins]) = 600px if 6 "content" DIVs then "first" has 720px width...).
Is this possible without using Javascript, only with CSS?
3 answers
solution1
1 2013-04-29 16:01:42
As the number of content div s is going to be dynamic, you will need to use javascript in order to achieve what you want. There is no css that will allow you to do calculations to work out a percentage width based on number of child elements.
The alternative to javascript would be if you knew how many div s are in each row while you are generating your html, you can add inline styles for the widths
Here are some examples
solution2
0 2013-04-29 15:04:10
I have set up a jsFiddle that probably answers your question. It now also contains the width but the added code is without any width so you are free to use what you want now
The HTML:
<div id="all">
<div class="first">First</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
it is no problem to give 2 or more classes to a div and it helps you a lot sometimes!
and the css:
div {
border-top: 1px solid black;
margin: 10px;
}
div.content
{
float:left;
}
div.rowstarter
{
clear:left;
}
div#all {
border: 0;
}
solution3
0 ACCPTED 2013-04-29 15:37:36
I have posted a fiddle which I believe answers your question.
First, you have to give #all and each child div, except for .first , a left float:
#all,
#all div {
float: left;
}
#all .first {
float: none;
}
Then, clear .rowstarter on the left.
#all .rowstarter {
clear:left;
}
You actually don't need the "content" class at all (and I would recommend removing it, as it clutters the code and adds to the page weight).
Edit: If you add a .rowstarter div in front of the .first div, .rowstarter has to have a fixed width and the left margin of .first needs to increase by the sum of the width and margins of .rowstarter .
#all .rowstarter {
width: 100px; // arbitrary fixed width
margin: 10px; // you've given all divs inside #all this margin, just restating for emphasis
}
#all .rowstarter + .first {
margin-left: 130px; // width of .rowstarter, plus its left and right margins and .first's original 10px left margin
}
To achieve the centering of div#all you have to add a wrapper around it, then apply the following css trick:
.wrapper {
position: absolute;
left: 50%;
}
#all {
position: relative;
left: -50%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.