How to make a new line in div displayed as table - html

I have this HTML Markup:
<div style="display:table;">
<span style="display:table-cell; vertical-align:middle;"></span>
<a style="display:table-cell;"><span></span></a>
<span style="display:table-cell; vertical-align:middle;"></span>
</div>
All what I want is that my last span should be shown on a new line.


To wrap it on a new line, set it as a p tag:
<div style="display:table;">
<span style="display:table-cell; vertical-align:middle;"></span>
<a style="display:table-cell;"><span></span></a>
<p style="display:table-cell; vertical-align:middle;"></p>
</div
Alternatively use a br tag:
<div style="display:table;">
<span style="display:table-cell; vertical-align:middle;"></span>
<a style="display:table-cell;"><span></span></a>
<br>
<span style="display:table-cell; vertical-align:middle;"></span>
</div


Please try this code.And remove display:table-cell from the parent div.
<div>
<span style="display:table-cell; vertical-align:middle;">First</span>
<a style="display:table-cell;"><span>Second span</span></a>
<br />
<span style="display:table-cell; vertical-align:middle;">child</span>
</div>


you use display:table so all its member are display in cell
so you want last span in new line you will remove table from div and simply display it
<div>
<span style="display:table-cell; vertical-align:middle;">1</span>
<a style="display:table-cell;"><span>2</span></a>
<br />
<span style="display:table-cell; vertical-align:middle;">3</span>
</div>


If you absolutely have to use those inline-styles, you can still target the last span with css but you have to use !important.
div > span:last-of-type {
display:table-row!important;
}
Fiddle

Related

CSS: Group divs as a "word" for responsive line breaks

I'm trying to figure out a way to group divs as "words" that will float as a series and line break depending on the width of the container. So the HTML looks like this:
<div class="word">
<div class="letter">t</div>
<div class="letter">o</div>
<div class="letter">o</div>
</div>
<div class="word">
<div class="letter">c</div>
<div class="letter">o</div>
<div class="letter">o</div>
<div class="letter">l</div>
</div>
So if the container allowed it, you would see "too cool" on one line, but if the container was too small, "cool" would appear on the next "line." I can't figure out what CSS will group the letters so they don't break and roll to the next line.
Totally open to using Bootstrap if it helps.

It makes more sense to me to replace the div's with class letter to spans
.word {
display: inline-block;
white-space:nowrap;
}
#container {
width:9%;
border:solid 1px green;
}
<div id='container'>
<div class="word">
<span class="letter">t</span>
<span class="letter">o</span>
<span class="letter">o</span>
</div>
<div class="word">
<span class="letter">c</span>
<span class="letter">o</span>
<span class="letter">o</span>
<span class="letter">l</span>
</div>
</div>

Display one span at a time using css

I've a html page with two span tag's which displays the same content but nested in a div with different class name:
<div class='class1'>
<span class='test-icon'>1</span>
</div>
<div class='class2'>
<span class='test-icon'>2</span>
</div>
Is there a way i can show only one <span> at a time based on the nested class, e.g. i've tried with the div.class1 span.test-icon {display: none}but it hides both.

You didn't close your span tags!
Here you are:
.class1 .test-icon{
display: none;
}
/*.class2 .test-icon{
display: none;
}*/
<div class='class1'>
<span class='test-icon'>Hola</span>
</div>
<div class='class2'>
<span class='test-icon'>Adios</span>
</div>

This seems to work as it should:
div.class1 span.test-icon {display:none;}
<div class='class1'>
<span class='test-icon'>Span 1</span>
</div>
<div class='class2'>
<span class='test-icon'>Span 2</span>
</div>

<img> sticks out the bottom of its wrapper

I have a wrapper wrapping around 3 divs that are inline-block and all three divs are 128px high. There is no padding nor margin anywhere. The first div contains an image and ends up not the same height as the other two (lower by 3.3px).
<div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
<hr style={{width:"100%"}}/>
<div>
<div style={{display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
<img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
</div>
<div style={{display:"inline-block",height:"128px",width:"*"}}>
<span style={{display:"block"}}>Name of Product</span>
<span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
<span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
</div>
<div style={{display:"inline-block",height:"128px",float:"right"}}>
<span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
</div>
</div>
<hr style={{width:"100%"}}/>
</div>
The code is written in JSX.
I've tried setting the wrapper to 128px, but the <img> is still sticking out the bottom
Why does the <img> act like that?

Add verticalAlign:top to each of the three <div>'s style attributes. This align's inline-block elements along their top edges.
<div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
<hr style={{width:"100%"}}/>
<div>
<div style={{verticalAlign:"top",display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
<img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
</div>
<div style={{verticalAlign:"top",display:"inline-block",height:"128px",width:"*"}}>
<span style={{display:"block"}}>Name of Product</span>
<span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
<span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
</div>
<div style={{verticalAlign:"top",display:"inline-block",height:"128px",float:"right"}}>
<span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
</div>
</div>
<hr style={{width:"100%"}}/>
</div>
See My inline-block elements are not lining up properly for additional information.

Display <img> and <p> in-line

I would like my image to come right after my <p> tag in the same line. I tried to wrap them inside a <div> block with display:inline-block set but to no avail.
<div style="float:left; display:inline-block; ">
<span style="float:left;width: 50%;">
<p style="float:left; display:block;" class="sentiment">Sentiment</p>
</span>
<span style="float:right;width: 50%;">
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png" style="width:20px;height:20px;">
</span>
</div>
http://jsfiddle.net/BMv5u/59/

Try adding inline-block to each of the sub elements:
<div>
<p style="display:inline-block;" class="sentiment">Sentiment</p>
<img style="width:20px;height:20px;display:inline-block" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png">
</div>

You can use align property on the img. check the fiddle here
<p >
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google.a51985becaa6.png" ALIGN="right" alt="">
Sentiment
</p>

stack image and span tag next to each other - bootstrap

I want to align both image tag and p span tag next to each other. And I do not want to put them in two different div's to follow the grid system as then it doesn't give me the correct final output that I desire.
Here is my small piece of code that I want to correct: FIDDLE
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
FIDDLE
I want the <p> tag next to the image tag.

Two options
.row p {
display: inline-block;
}
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
or
.row img {
float: left;
}
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>

Apply this css --
img, p {
display:inline-block;
}
This will make the img and p tag to be next to each other, as long as both element's width doesn't cross the container's width.