0
100
VistasWebpage in the same row pictures
I want this photos in the same row what should i change ?
I tried float left and other commands but one picture is staying in the lower right corner.
<section id="services">
<div class="container">
<div class="row wow fadeInUp">
<div class="col-md-4">
<img src="resimler/bimplus.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">BIMPLUS</h4>
<p>HNP</p>
</div>
<div class="col-md-4">
<img src="resimler/brighe.jpg" class="wow fadeInRight" height="80px">
<h4 class="wow fadeInRight delay-2s">BRIDGE</h4>
<p>HNP</p>
</div>
<div class="col-md-4">
<img src="resimler/precast.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">PRECAST</h4>
<p>HNP</p>
<div class="col-md-4">
<img src="resimler/precast.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">PRECAST</h4>
<p>HNP</p>
</div>
</div>
</div>
</section>
and style.css file i tried margin-left , float left but i couldn't change.
#services
{
background-color: #efefef;
padding-top: 80px;
padding-bottom: 80px;
}
#services .col-md-4
{
padding: 20px;
}
#services .col-md-4 h4
{
padding: 5px;
}
#services .col-md-4 img
{
width: 200px;
display: inline-block;
}
#services .col-md-4 p
{
padding: 5px;
text-align: justify;
}
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
add </ div> after < p>HNP</ p> to close your tag
then, change col-md-4 to col-md-3 so that you can get 4 columns
·
Juan Pablo Isaza
Denunciar
0
You can use display: flex; to fix this issue because it's more flexable, that's an example:
<section class="services">
<div class="service">
<img src="service.jpg">
<h3>Service</h3>
<p>Service Description...</p>
</div>
<div class="service">
<img src="service.jpg">
<h3>Service</h3>
<p>Service Description...</p>
</div>
<div class="service">
<img src="service.jpg">
<h3>Service</h3>
<p>Service Description...</p>
</div>
<div class="service">
<img src="service.jpg">
<h3>Service</h3>
<p>Service Description...</p>
</div>
</section>
.services {
display: flex;
justify-content: space-between;
background: #eee;
padding: 40px;
}
.services .service {
background: #ccc;
padding: 10px;
}
You can read about flexbox here: https://www.w3schools.com/css/css3_flexbox.asp
·
Juan Pablo Isaza
Denunciar
Responde la pregunta