यहां छवि विवरण दर्ज करेंमैं उस खाली जगह पर पहली पंक्ति में एक और छवि रखना चाहता हूं। बाईं ओर का बटन (अभी बाहर) छवि को ओवरराइड कर सकता है या नहीं भी कर सकता है मैं बूटस्ट्रैप ग्रिड लेआउट का उपयोग कर रहा हूँ। col-sm-2 ने 6 बराबर कॉलम बनाए लेकिन मुझे एक बटन भी लगाने की जरूरत है। उसके लिए, मैंने बूटस्ट्रैप बटन का उपयोग किया है और इसकी चौड़ाई कम कर दी है ताकि मैं छठी छवि के लिए कुछ जगह खाली कर सकूं।

.list-group {
    width: 100%;
}
.list-group-item-action {
    color: black;
    background: white;
}
.list-group-item-action:hover {
    background: #3d6277;
    color: white;
}
.container-fluid {
    width: 100%;
}
.search {
    width: 300px;
}
.img-fluid {
    margin: 0 auto;
}
h2 span {

	color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 

}
h2{
   color: white;
   position: absolute; 
   top: 0px; 
   left: 50px; 
   width: 100%; 	
}
.btn {
  width:0px;
  padding:10px;
}

h6{
  font-size:22px;
  text-align: center;

}

.btn btn-primary btn-sm{
  background-color: #8064A2 !important;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}
/*
h2 span.spacer {
   padding:0 5px;
}*/


.font-size{
	font-size:10px;
  font-weight:20px;
}
.vertical{
  text-align: horizontal;
  -webkit-transform: rotate(-90deg);  /* Chrome, Safari 3.1+ */
     -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(-90deg);  /* IE 9 */
       -o-transform: rotate(-90deg);  /* Opera 10.50-12.00 */
          transform: rotate(-90deg);
}
<div class="container-fluid">
 <div class="search">
<input type="text" class="form-control" name="search box" placeholder= "search..." [(ngModel)]="movieName">	
</div>
<br>
<div class="row">
<button type="button" class="btn btn-info btn-sm"><h6 class="vertical">Out Now</h6></button>
 <div class="list-group col-sm-2" *ngFor="let movie of movies|search:movieName;">
    <button type="button" (click)="detail(movie.id)" class="list-group-item list-group-item-action" >
    <div class="image">
<img src={{movie.img}} class="img-fluid" width="250px" height="250px" />
<h2><span class='spacer'>{{movie.name}}</span> </h2>
<span class="font-size">{{movie.genres}}</span>

</div>
</button>
 </div>
</div>
</div>
0
Humble Dolt 28 सितंबर 2017, 09:16

3 जवाब

सबसे बढ़िया उत्तर

आपको छवियों की चौड़ाई कम करनी चाहिए और उन्हें समान बनाना चाहिए।

जैसा कि आपके पास प्रति पंक्ति 6 ​​छवियां हैं, आप उनकी चौड़ाई इस प्रकार निर्धारित कर सकते हैं:

img { /* set them a class or be more specific */
  width: calc(100% / 6);
}

संपादित करें: जैसा कि टिप्पणियों में चर्चा की गई है, ओपी को एक ही पंक्ति पर रखे एक बटन के कारण समस्या थी जिसने छवि को अगली पंक्ति में धकेल दिया।

समाधान: button absolute की स्थिति बनाएं और एक z-index प्रॉपर्टी लगाएं ताकि वह दिखाई दे।

1
Florin Pop 28 सितंबर 2017, 11:56

आप अपने :nth-child(6) मूवी आइटम पर margin-right: 0; लागू कर सकते हैं।

0
Sean Francis N. Ballais 28 सितंबर 2017, 10:31

यह लिंक आपकी मदद कर सकता है। ऐसा करने का एक और तरीका है

<img style='height: 100%; width: 100%; object-fit: contain'/> 
0
Mhd 28 सितंबर 2017, 16:37