Here is my code
<div>
<p>hello nirmesh</p>
<span> <img src="x.png"/></span>
</div>
I want is to show image next to my <p> tag and not below it. Please anyone help me to resolve this
Making the p tag, which is defaulted to "block" an "inline-block" element, will let other elements flow along after it. It's best to add these rules in an external stylesheet, but for illustration:
<div>
<p style="inline-block; margin-right: 5px;>hello nirmesh</p>
<span><img src="x.png"/></span>
</div>
Set the display of the p tag to inline.
p {
display: inline;
}
<div>
<p>hello nirmesh</p>
<img src="x.png"/>
</div>
<div>
<p style="display:inline-block;>hello nirmesh</p>
<span> <img src="x.png"/></span>
</div>
Related
I have an html structure defined like this:
<div class="container">
<div class=photoItems>
<div class=photoWrapper>
<img class="image" ... />
</div>
<div class=photoWrapper>
<img class="image" ... />
</div>
<div class=photoWrapper>
<img class="image" ... />
</div>
...
</div>
</div>
What I would like to be able to do is use the "container" style to recursively go through its children and locate the first instance of type <img/> and force a display:none;. Kind of like this (non-working css):
.container {
width: 100%;
> img:first-of-type {
display: none;
}
}
From what I understand the 'first-of-type' selector only works at the sibling level, however for reasons I am only able to operate at the "container" level - so is there a way to recursively select the first instance of an image from the styling at the great-grandfather level?
On my own understanding, ">" selector selects the elements that is first descendant of an element. Like for example div > img, this one selects all the img that are first descendant of the div and not the img that is on its second successor.
So, if I didn't misunderstood your question, what you are trying to accomplish is to find the very first img inside the .container class by using the :first-of-type selector. If we base on the structure of your elements, it will never happen. This is because you are using ">" selector but there are no direct descendants of img inside since images are being wrapped inside .photoWrapper class. And if you use div img:first-of-type, this will select all the first instance of image inside the div as well as in its successors.
Sadly, I think there's still no feature/selector on CSS that can find elements to all its successor in accordance to your question. You can read about selectors here:
https://www.w3schools.com/cssref/css_selectors.asp /
https://www.w3schools.com/cssref/css_selectors.asp
Hmm I don't know if you prefer this, but here's my workaround for your question. I will use find('img:first') function of jquery.
Hope this will help you.
$(document).ready(function(){
$('.container').find('img:first').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class=photoItems>
<div class=photoWrapper>
<img class="image" alt="1" />
</div>
<div class=photoWrapper>
<img class="image" alt="2" />
</div>
<div class=photoWrapper>
<img class="image" alt="3" />
</div>
...
</div>
</div>
What about:
.container .photoWrapper:first-child img {
display:none;
}
I am trying to figure out how to get p tags within a div to pop up side by side and display somewhat like a table, but using flex instead of any floats.
<div class="summary">
<img src="life.jpg" alt="Life's great">
<div>
<div>
<p>Chapter 1:</p>
<p>0-10</p>
</div>
<div>
<p>Chapter 2:</p>
<p>11-20</p>
</div>
<div>
<p>Chapter 3:</p>
<p>21-30</p>
</div>
</div>
</div>
So the output should look something along these lines, except I will have borders and such to design a box around it. I have to use flex which is throwing me off.
Chapter 1: 0-10
Chapter 2: 11-20
Chapter 3: 21-30
Should just be as easy as applying display: flex on the container you want to have flex-laid out children within and giving a little margin. The snippet below lays out the markup in the manner you showed in your question. It uses terrible selectors, but I didn't want to change your HTML structure at all. However, I'd recommend putting classes on elements you wish to target so that you can avoid using element names as selectors.
.summary > div > div {
display: flex;
}
.summary > div > div > p:first-child {
margin-right: 10px;
}
<div class="summary">
<img src="life.jpg" alt="Life's great">
<div>
<div>
<p>Chapter 1:</p>
<p>0-10</p>
</div>
<div>
<p>Chapter 2:</p>
<p>11-20</p>
</div>
<div>
<p>Chapter 3:</p>
<p>21-30</p>
</div>
</div>
</div>
I have 3 divs, an image div, a text div and another image div
http://jsfiddle.net/m02pw4wk/4/
<div id="1" style="display:inline-block; width:100px">
<span style="margin:0;">Center<span>
</div>
I want to center the span text in its parent div
I tried vertical-align on the text but no success, also I see that there is a small margin, ou padding below the text, where is it coming from ?
Any pointing on the solution would be helpful
Cheers
You need to change the vertical-align property for the img element - not the text. It's worth noting that the default value for this property is baseline, thus the image element is aligned to the baseline of the text. Values such as top/bottom/middle will change this behavior.
Updated Example
img { vertical-align: middle; }
It's also worth noting that ids are suppose to be unique.
<div id="userbox" style="float:right; background-color:grey;display:table;">
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/user_pic2.png" />
</div>
<div id="1" style="display:inline-block; width:100px;display:table-cell;vertical-align:middle;">
<span style="margin:0;">Center<span>
</div>
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/cross.png" />
</div>
</div>
I have something like this:
<div id="someID">
<div class="text">
-----other html tags
</div>
<div class="text">
-----other html tags
</div>
<div class="text">
-----other html tags
</div>
</div>
And some CSS for the text div. It is possible to set different CSS for the second div with the class of text?
You can easily do with with nth-child:
#someID .text:nth-child(2) {
background:red;
}
Demo: http://jsfiddle.net/P6FKf/
You can use the pseudo selector nth-child i.e div.text:nth-child(2)
I want to use span inside div
div is used to put a red horizontal line
<div style="background-color:red;">
</div>
span is used inside div to put elements to right
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
</div>
But the horizontal line do not get red color, only ABC is shown in right, infact there is no effect of div style like width:900px......why?
I'd suggest:
<div style="background-color:red; text-align:right;">ABC</div>
Otherwise, you need to add overflow:auto to your div's style definition if you do want to leverage the <span> as in your original example.
Cheers
Add overflow:auto to the div:
<div style="background-color:red;overflow:auto;">
<span style="float:right;">
ABC
</span>
</div>
jsFiddle example
Floating the inner span causes the div to essentially collapse, and adding the overflow rule allows it to regain the span.
The float is not giving your div any height. You need to follow it up with a clear. Try this:
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
<div style="clear: both;"></div>
</div>
You need to add the property overflow:hidden; in your DIV.
Below I mentioned the Code:
<div style="background-color:red; text-align:right; overflow:hidden;"> ABC </div>