I have a problem with CSS.
.special-banner{
width: 100vw;
position: relative;
}
.special-banner > img{
width: 100%;
height: 100%;
}
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_01_renew.png"/>
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_02_renew.png"/>
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_03_renew.png"/>
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_04_renew.png"/>
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_05_renew.png"/>
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_06_renew.png"/>
</div>
As you can see, there are some White line.
I want to remove them.
Also, I have 1 solution.
Using display: flex.
It's efficient but I can't use that.
Do you have another solution?
I guess it causes with display:block..
I don't know if you added display:block or not, but putting it in the img style removes the white line
.special-banner {
width: 100vw;
position: relative;
}
.special-banner>img {
width: 100%;
height: 100%;
display: block;
}
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_01_renew.png" />
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_02_renew.png" />
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_03_renew.png" />
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_04_renew.png" />
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_05_renew.png" />
</div>
<div class="special-banner">
<img src="http://wanho1108.dothome.co.kr/hmb/web/n_himages/sub/sub_point_use_banner_06_renew.png" />
</div>
try applying float:left for .special-banner and .special-banner > img
.special-banner,.special-banner > img{
float: left;
}
Related
I am creating this layout
My code :
<div class="tour-grid">
<div class="tgItem tg-left">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/tours/3.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
<div class="tgItem tgChild">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/blog/2/2.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
<div class="tgItem tgChild">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/blog/2/3.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
<div class="tgItem tgChild">
<a href="" class="tgCard">
<div class="tgCard__image ro-4">
<img class="ro-4 js-lazy loaded" src="img/tours/2.png" alt="image" data-ll-status="loaded">
</div>
</a>
</div>
</div>
Check my fiddle
But grid are not equal and image doesn't fit inside div.
Right div height should adjust to left col
what is rules with grid system ? should i wrap 3 div into one. ?
You can simplify your code like below
.grid {
display: grid;
grid-auto-flow: column;
grid-gap: 10px;
max-width: 600px;
margin: 20px auto;
}
.grid img:first-child {
grid-area: span 3/span 2;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<img src="https://picsum.photos/id/1074/600/400">
<img src="https://picsum.photos/id/1074/300/200">
<img src="https://picsum.photos/id/1074/300/200">
<img src="https://picsum.photos/id/1074/300/200">
</div>
I have an article explaining this code and more: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/#image-grid
So I´m having trouble fitting 3 images in the same row ,
The thing is, that this images are not always the same so when I upload an image that its has a diferrent size everything moves., Any advise to achieve this ? thanks
HTML:
<div class="first-slot">
<div class="masonry-box post-media">
<img src="upload/'.$row['fotos'].'" alt="" class="img-fluid">
<div class="shadoweffect">
<div class="shadow-desc">
<div class="blog-meta">
<span class="bg-orange">'.$row['categoria'].'</span>
<h4>'.$row['titulo'].'</h4>
<small>'.$row['fecha'].'</small>
<small>'.$row['autor'].'</small>
</div>
</div>
</div>
</div>
</div>
CSS:
.first-slot {
float: left;
width: 65%;
height: 35%;
}
.last-slot,
.second-slot {
float: left;
width: 35%;
height: 28%;
}
Bootstrap
.img-fluid {
max-width: 100%;
height: auto;
}
I think this will solve your problem. You can use these class names and css in you code. Change image src locations according to your requirements. And change margin attribute in css according to your need.
PS: dnt forget to include bootstrap link in your project file
.imgItem{
display: inline-block;
margin: 10px;
}
.imgContainer{
display: flex;
}
<div class="row">
<div class="col imgContainer" >
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
</div>
</div>
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
I got code like this
.divA {
background: red;
width: 500px;
display: flex;
flex-direction: row;
overflow-y: scroll;
}
.epi {
width: 50%;
background: blue;
}
<div class="divA">
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
</div>
I'm expecting this
But I'm getting this
I want item in .divA has the width of 50% of .divA
Edit: Since you don't want it to wrap, but scroll horizontally, you can put it as overflow-x: scroll;
.divA {
background: red;
width: 500px;
display: flex;
justify-content: flex-start;
overflow-x: scroll;
overflow-y: auto;
}
.epi {
min-width: 50%;
background: blue;
}
<div class="divA">
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
<div class="epi">
<h1>dsds</h1>
<p>sdsds</p>
<img src="img/heart.png" alt="" />
</div>
</div>
I'm trying to learn some html and I'm not sure what I'm doing wrong. I have 3 images I want to have in the same horizontal line like | img 1 | img 2 | img 3 |. The outer div container im using has enough space to fit all 3 images.
I've tried using inline-block, inline and float but those don't work.
Here is what I got:
<div id="banner" style="overflow: hidden; display: inline-block;">
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
You need to set the inside divs to inline-block, not the outside one.
<div id="banner">
<div class="inline-block">
<img src ="img1.jpg">
</div>
<div class="inline-block">
<img src ="img2.jpg">
</div>
<div class="inline-block">
<img src ="img3.jpg">
</div>
</div>
I removed all of your inline css because it is just bad practice. You should have a separate css file where you define the styles. I used "inline-block" as a class name here, but name it whatever you want.
In your external css file you would have this, if you kept my naming convention,
.inline-block {
display: inline-block;
}
Also, heres a working fiddle of another rendition, three images side to side.
https://jsfiddle.net/3m33emfd/
banner does NOT need to be set to inline-block, it is an outside container for your child divs. You would actually want #banner to be display: block, so I put that in my working fiddle.
use display:inline-block;
<div id="banner" style="overflow: hidden;justify-content:space-around;">
<div class="" style="max-width: 20%;max-height: 20%;display: inline-block;">
<img src="img1.jpg">
</div>
<div class="" style="max-width: 100%;max-height: 100%;display: inline-block;">
<img src="img2.jpg">
</div>
<div class="" style="max-width: 20%;max-height: 20%;display: inline-block;">
<img src="img3.jpg">
</div>
</div>
give the following css
display: flex; justify-content:space-around;
<div id="banner" style="overflow: hidden; display: flex; justify-content:space-around;">
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
You have the images enclosed within div tags, which are block elements.
You should instead apply the style directly to the images, and do away with the divs, like this:
<img style="max-width:20%" src="…">
.image-div{
float:left;
margin-right:10px;
max-width: 20%;
max-height: 20%;
}
<div id="banner" style="overflow: hidden; ">
<div class="image-div" >
<img src ="img1.jpg">
</div>
<div class="image-div" >
<img src ="img2.jpg">
</div>
<div class="image-div" >
<img src ="img3.jpg">
</div>
<div style="clear:left;"></div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Studio </title>
<style>
.image {
display: inline-block;
}
</style>
</head>
<body>
<div id="banner" style="overflow: hidden; display: inline-block;">
<div class="image" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="image" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="image" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
</body>
</html>
I have seen many different ways to resolve the following, but it does not work quite as I hoped...
I need to make a div (main div) with severel divs inside (item-divs).
Each item-div must show a different picture, but when I hover a certain picture, this picture should be hidden and a text showen instead - in the same div.
How on earth can I make this?
For example this variant:
<div class="wrap">
<div class="child1"></div>
<div class="child2"></div>
</div>
And your css chould be:
.wrap:hover > child2{
opacity: 0;
}
But static styles should be like this:
.wrap{
width: 200px;
height: 300px; /* maybe auto if you want */
position: relative;
}
.child1{
width: 100%;
height: 100%;
background: lightgreen;
}
.child2{
width: 100%;
height: 100%;
background: #ff3030; /* surely for example */
position: absolute;
top: 0;
left: 0;
}
/* and this block .child2 will be faced. When it's opacity will be 0, you get your effect */
You can do this with the CSS pseudo element :hover
See example:
http://jsbin.com/vijawuda/1/edit?html,css,output
HTML Markup:
<div class='outer-container'>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 1
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 2
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 3
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 4
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 5
</div>
</div>
</div>
CSS
.image-holder {
width: 150px;
height: 150px;
display: inline-block;
}
.image-holder > .text {
visibility: hidden;
width: 150px;
height: 150px;
}
.image-holder:hover img {
visibility: hidden;
}
.image-holder:hover .text {
visibility: visible;
}
HTML
<div class="main">
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
</div>
CSS
.main {
width: 1000px;
height: 200px;
}
.content {
width: 150px;
height: 150px;
background-color:#c80000;
color:#fff;
font-family:arial;
text-align:center;
float:left;
margin-left: 10px;
font-size: 20px;
cursor:pointer;
}
.content > div.maincontent + div {
display:none;
padding-top:50px;
}
.content:hover > div.maincontent {
display:none;
}
.content:hover > div.maincontent + div {
display:block;
}
http://jsfiddle.net/q92zL/4/