I have the following division container:
<span> Lorem. </span>
<div style="display: inline-block; background-color: yellow;">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. </p>
</div>
<span> Lorem. </span>
As expected, the division container acts like an inline-level element.
When I alter the value of the display property to "inline flow-root", the division container no longer acts like an inline-level element and instead acts like a block-level element:
<span> Lorem. </span>
<div style="display: inline flow-root; background-color: yellow;">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. </p>
</div>
<span> Lorem. </span>
According to the Mozilla Developer Network documentation, the "inline-block" value should be equivalent to "inline flow-root".
Why does the two values produce different display results?
Thanks in advance.
As per the answer given in link,
display: flow-root; Needs Chrome Canary or Firefox Nightlies.
sets it to display: table; or display: block;
May be you can use overflow: visiible to contain float-ed elements.
Related
I have a data attribute data-modals. I would like to target this with CSS when the property has a value. I don't mind what the value is.
I can find guides for selecting when the attribute exists, or specific values, but not for 'any' value - the equivalent of '*'.
ie.
<element data-modals="" /> should not be targeted
<element data-modals="any text" /> should be targeted
You can the CSS Attribute Selector like this:
element[data-modals]:not([data-modals=""]) {
color: red;
}
Example:
p[data-modals]:not([data-modals=""]) {
color: red;
}
<p data-modals="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, fugit.
</p>
<p data-modals="any text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, fugit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, fugit.
</p>
Some useful links:
Documentaion of Attribute selectors: MDN
Documentaion of Attribute selectors: W3School
Documentaion of :not(): MDN
I want to force my text to always be two lines.
If it's longer than two lines then it should have "..." at the end.
If it's shorter, then the second line should be empty.
Can this be done with CSS only?
I'm posting this again cause someone closed it as duplicate but linked a solution which isn't what I'm asking. This is the solution linked:
Limit text length to n lines using CSS
but it doesn't cover one of my cases (when the text is shorter than 2 lines)
EDIT: Here's a JSFiddle showing how in my other case it doesn't work:
https://jsfiddle.net/Lukgzefy/
<div class="cards">
<div class="card">
<div class="img"></div>
<h2>lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
<div class="card">
<div class="img"></div>
<h2>lorem ipsum dolor sit amet consectur amet adipiscing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
<div class="card">
<div class="img"></div>
<h2>lorem ipsum dolor sit amet consectur consectetur adipisicing elit. Explicabo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
</div>
As you can see, the first one should occupy 2 lines (and the second should be empty) but instead it only takes one, throwing the whole thing off.
I need to make a blocks like on the picture
Left block is col-5, right is col-7, which must have two rows with 50% height of the left block.
How to make 50%-height blocks?
.row {
background: #f8f9fa;
}
.col,
.col-5,
.col-7 {
border: solid 1px #6c757d;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis distinctio at, molestias doloremque optio tempora laudantium facere sequi. Tempore aliquid exercitationem accusamus nulla culpa dolorum rerum consequatur impedit quia porro? Lorem ipsum
dolor sit amet.
</div>
<div class="col-7">
<div class="row h-50">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="row h-50">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem....
</div>
</div>
</div>
</div>
</div>
You can do it this way, or use Flexbox instead of Bootstrap sizing utilities to create the layout you want. Flexbox has been designed especially to facilitate the creation of this kind of structure.
My mistake is that I set the height for a cols in the right block.
When I wrapped each .col in a .row and set a height of 50% for these rows, everything worked as it should. Like in droduit answer.
I am having issues getting a div to display on top of a Google Map API block.
As far as I can see I have it positioned absolute with a z-index which should place it on top, but I don't see it. It is the .topblock1 div I am looking to appear over the map.
<div class="block4">
<div id="map-canvas">
<div class="topblock1">
<h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
<p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
SEE OUR CURRENT PROJECTS >>
<div class="clear"></div>
</div>
</div>
</div>
I have a similar code, try closing your map-canvas div first:
<div class="block4">
<div id="map-canvas"></div>
<div class="topblock1">
<h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
<p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
SEE OUR CURRENT PROJECTS >>
<div class="clear"></div>
</div>
</div>
Make a wrapper around the map canvas, the code of google hide all elemets that are not native.
<div class="wrapper">
<div class="topblock1">
<h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
<p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
SEE OUR CURRENT PROJECTS >>
<div class="clear"></div>
</div>
</div>
<div id="map-canvas">
</div>
</div>
And set this css
<style>
.wrapper{ display:block; position:relative; top:0px; left:0px; right: 0px;}
.topblock1{ display:block; position:absolute; top:0px; left:0px; right: 0px; z-index:99999} /* Must be above map-canvas */
</style>
I would like to build a responsive 3-columns layout. For large screens I have 3 columns, reduced to 2 for medium and to 1 for small screens. Blocks contain text, so they have different height. My goal is to create a line of blocks aligned to the top (this illustration refers to 3-columns layout but principle is valid for 2-columns too).
But my best result is the following
Pretty different, yes. I think the problem is that I am not able to create virtual "lines" of blocks, where I can align 1-2-3 and 4-5-6 to the top. Here is my code (I haven't posted it on jsfiddle because effect can be noticed better on wide screens).
HTML
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
CSS
.span3 {
float:left;
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:left;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:31%;
margin-left:3.5%;
}
.span3:nth-child(3n+1) {
margin-left:0%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:48%;
margin-left:4%;
}
.span3:nth-child(odd) {
margin-left:0%;
}
}
#media only screen and (max-width:500px)
{
.span3 {
width:100%;
margin-left:0%;
}
}
Can anybody help? Thanks in advance.
Note I know there are tons of frameworks with this feature (like in this question), but if possible I would prefer to keep my own code.
In Bootstrap 2.x, you can do this..
<div class="row">
<div class="span4">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span4">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span4">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="clearfix"></div>
<div class="span4">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span4">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span4">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Demo: http://www.bootply.com/120857
i put a row class in each row. here is the code
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
and float it left and put margin buttom
whole code is here
http://jsfiddle.net/ndEUS/
Now its working if u use 3 times clear:both but I rly dont know why is needed use there 3x.
http://jsfiddle.net/LmPwe/
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div style="clear:both;"></div><div style="clear:both;"></div><div style="clear:both;"></div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Find it out! Super simple and effective.
CSS
.span3 {
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align:top;
margin-right:-4px;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:33.3%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:50%;
}
}
#media only screen and (max-width:500px)
{
.span3{
width:100%;
}
}
Hope it can help somebody.