I have a list of icons to be displayed. I am using the following layout to do this:
<div class="icons">
<div class="icon1">
img src="someimage" <p>Some test </p>
</div>
.
.
.
</div>
This is the CSS I am using:
.icons{
margin-top:5px;
margin-left:5px;
left:0;
}
.icon1{
line-height:15px;
margin-top:8px;
width:75px;
}
How do I modify this so that if I add more divs with the class icon1 they will be aligned in a new column when the max-height is reached?
I am unsure whether float:left will work. In my experience this causes the div tags to be added side by side and once they reach the end of the parent div the next one will be added to the bottom of the first column. He requires the opposite #Jack
what i suggest is using jquery to check if the height of your div tags are exceeding the parent div. If they are then add a new div and begin appending your image-div tags to the new div with style="float:left". Thus if your initial DOM contains
< div class="icons" > < /div >
appending one element should change the DOM to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
</div>
</div>
appending another element should change it to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
</div>
appending a third element which exceeds the parent div would change the DOM to this
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
<div class ="column" style="float:left">
<div class="icon3" > <img src="" height="" width="" /> </div>
</div>
</div>
You can do this with CSS 'multi-columns',
demo
but it is still a Candidate Recommendation, so the support is still very minimal even though you can use vendor prefixes to get it working(although not without some quirks) on the latest versions of Firefox, Chrome and Opera.
Related
I want the elements to be side by side and not on top of one another.
When I say best way, I want the elements to not overlap when you change the size of the screen.
Here is my HTML:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="col-md-offset-1 col-sm-12 col-md-10" style="background-color: #f6f6ff;">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
<h1>2</h1>
<img src="media/github.png" alt="GitHub" height="150" width="150">
</div>
</div>
Here is a picture of what it looks like:
Right now you have an h1 separating the two images. Since heading tags are block level elements by default, it's not possible to line up the images side by side with the h1 separating them. However, if you put each image/heading in their own column, they will line up:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="row">
<div class="col-xs-6">
<h1>1</h1>
<img src="http://placehold.it/150x150" alt="Subversion" height="150" width="150">
</div>
<div class="col-xs-6">
<h1>2</h1>
<img src="http://placehold.it/150x150" alt="GitHub" height="150" width="150">
</div>
<div class="clearfix"></div>
</div>
</div>
Bootply
Using the Grid system to scale up to 12 columns, as described here
<div class="row">
<div class="col-md-4">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
</div>
<div class="col-md-4">
<h1>2</h1</div>
<div class="col-md-4">
<img src="media/github.png" alt="GitHub" height="150" width="150
</div>
You can change the size of the columns by increasing/decreasing col-md-4
If you want two elements to be side by side, you can use "row" and "col" from the bootstrap grid.
For example, this is how to code 2 images:
<div class="row">
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
</div
The bootstrap answer is the best. I had the same requirement before, only difference being that it was not acceptable to have the content in the different columns visually spread apart too much on large screens. In that case, you would use the original html and use css
.container-fluid div > * {
margin: 0 auto;
display: inline;
}
I've tried #logos img:first-child{} to try and format my top img a little different from the rest but it just doesn't work. Can anyone help me figure out why?
<div id="logos" name="logos">
<div class="container">
<div class="row">
<br>
<h1 class="centered">SHOWS</h1>
<img src="img/kenshows400x300.jpg" class="img-responsive" alt="Ken Cooper" width="400px" height="300px">
<hr>
</div><!-- end row -->
<div class="row">
<div class="col-lg-6">
<img src="img/shows/jkllogo450x300.jpg" class="img-responsive" alt="Jimmy Kimmel Live" width="450px" height="300px">
</div>
<div class="col-lg-6">
<img src="img/shows/latelateshowlogo450x300.jpg" class="img-responsive" alt="Late Late Show" width="450px" height="300px">
</div>
</div><!-- end row -->
</div>
</div>
The first-child pseudo-selector selects any element which is the first child of its parent. In your example, in the first .row div, the h1 "SHOWS" is the first element and your img is the second element. So it doesn't get selected. In contrast, in the other div, both img tags are the first child of their parent, so they do get selected.
In other words, img:first-child doesn't select the first img tag, it selects the img tag which is the first child of its parent. If it has a previous sibling, then first-child doesn't apply.
We can fix your code by instead putting the first-child on .row so that the img in the first row div is selected, which also happens to be the first image.
#logos .row:first-child img {
border: 1px solid blue;
}
<div id="logos" name="logos">
<div class="container">
<div class="row">
<br>
<h1 class="centered">SHOWS</h1>
<img src="img/kenshows400x300.jpg" class="img-responsive" alt="Ken Cooper" width="400px" height="300px">
<hr>
</div> <!-- end row -->
<div class="row">
<div class="col-lg-6">
<img src="img/shows/jkllogo450x300.jpg" class="img-responsive" alt="Jimmy Kimmel Live" width="450px" height="300px">
</div>
<div class="col-lg-6">
<img src="img/shows/latelateshowlogo450x300.jpg" class="img-responsive" alt="Late Late Show" width="450px" height="300px">
</div>
</div> <!-- end row -->
</div>
</div>
:first-child / :last-child required any list in one section, but in your code img wrapped with div so try to add :first-child on just parent div, see below sample code
#logos .row:first-child img{}
Try this:-
#logos .row:first-child img{
}
Another option could be first-of-type
try #logos img:first-of-type{}
HTML CODE
<div class="header" style="float:left">
<div class="logo">
<img src="some image" height="200px" width="200px"/>
</div>
<div class="name">company name</div>
<div class="pic">
<img src="some image" height="200" width="200"/>
</div>
</div>
CSS styling
header{background-color:red;width:1200px;height:400px;float:;}
.logo{width:17%;}
.name{color:#ADFF2F;font-size:48pt;margin-left:250px;width:38%}
.pic{;margin-left:950px;}
.header > div {
float: left;
}
Also, your header class in the CSS needs to have a . in front of it.
You also need to remove the margin-left from .pic
http://jsfiddle.net/samliew/DAC7p
I want to show this four images without any margin. How to do this?
Each A,B,C,D look like one image.
A
B
C
D
<div align="center">
<img src="a.png">
<br/>
<img src="b.png">
<br/>
<img src="c.png">
<br/>
<img src="d.png">
</div>
I tried css margin=0 and style padding =0 but it is not working.
Update---
<img id="ImgEmotion" src="a.png" width="40" border="0">
<img src="b.png" width="20" height="20" border="0">
If I use css, I know there are no margin.
If I use #no_margin, how can I apply to img tag? Also I need the 'id='ImgEmotion'.
CSS:
img
{
margin:0;
display:block
}
HTML:
<div align="center">
<img src="a.png">
<img src="b.png">
<img src="c.png">
<img src="d.png">
</div>
JSFIDDLE
I have three images inside a div that scale according to window size. The div has a width of 60% and is floated left
<div id="display">
<img src="assets/images/angle1.jpg" style="width:35%;height:35%;" />
<img src="assets/images/angle2.jpg" style="width:35%;height:35;" />
<img src="assets/images/angle3.jpg" style="width:60%;height:100%;" />
</div>
Basically I want to maintain this scalability with the images arranged like this:
IMG SETUP http://brycekirk.ca/assets/images/setup.gif
Use nested DIVs to keep the right-side images together:
<div id="display">
<div id="column1" style="width:35%; float:left">
<img src="assets/images/angle1.jpg" /><br/><img src="assets/images/angle2.jpg" />
</div>
<div id="column2" style="width:60%; float:left">
<img src="assets/images/angle3.jpg" />
</div>
</div>