सामग्री की चौड़ाई की परवाह किए बिना पूर्ण स्थिति

Question

सारांश

आप उदाहरण तक पहुंच सकते हैं यहां, या Wayback मशीन पर> अगर पहले लिंक टूट गया है।

मैं एक वीडियो पर एक छवि पर आरोपित समय के तत्व को संरेखित करने की कोशिश कर रहा हूं। मैंने position: absolute और left: 81px का उपयोग करके इसे संरेखित किया है। समय में आमतौर पर 4 वर्ण होते हैं (उदाहरण के लिए 3:33) तत्व के लिए एक सुसंगत चौड़ाई।

हालाँकि, जब समय 4 वर्णों से अधिक है (उदा। 13:33), तो संपूर्ण तत्व दाईं ओर ले जाता है।

यहां इस विशिष्ट तत्व का एक कोडन है। बस #nextVideoTime की सामग्री के साथ खेलें

सवाल

मैं सामग्री की चौड़ाई की परवाह किए बिना किसी तत्व को कैसे स्थिति में रख सकता हूं?

कृपया ध्यान दें कि मूल तत्व की प्रतिशत चौड़ाई है, इसलिए मैं इसके बजाय right: 280px का उपयोग नहीं कर सकता ...

html css position width

1

HelpingHand 21 नवम्बर 2015, 20:28

Answer 1

#nextVideoTime निकालें शैली left

और जोड़

width:98px;
overflow:hidden;
text-align:right;

2

Abel D 21 नवम्बर 2015, 18:27

Answer 2

मैं इसे इस तरह पसंद करूंगा:

छवि और समय के लिए एक div जोड़ा गया।

एचटीएमएल

<div id="nextVideo" onclick="forwardVideo();">
  <span class="fa fa-forward"></span>
  <div class="container">
    <img id="nextVideoImage" src="//i.ytimg.com/vi/5y_KJAg8bHI/default.jpg">
    <p id="nextVideoTime">13:15</p>
  </div>
  <p id="nextVideoName">Avicii - Wake Me Up (Lyric Video)</p>
</div>

सीएसएस:

.container {
  position: relative;
  float: left;
  height: 100%;
}
#nextVideoTime {
  bottom: 2px;
  margin: 0;
  right: 2px;
}

यहां DEMO है।

1

Hiral 21 नवम्बर 2015, 18:18

Answer 3

आप चौड़ाई और पाठ-संरेखण का उपयोग कर सकते हैं:

body {
  background-color: black;
}

#nextVideo {
  margin-bottom: 50px;
  background-color: #fff;
  height: 75px;
  width: 25%;
  padding: 5px;
  text-align: initial;
  position: relative;
  display: inline-block;
  border-radius: 5px;
}

#nextVideoImage {
  height: inherit;
  float: left;
}

#nextVideoName {
  display: inline-block;
  margin: 0px 0px 0px 5px;
}

#nextVideoName {
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}
/*----- IMPORTANT PART -----*/

#nextVideoTime {
  position: absolute;
  color: white;
  font-size: 0.7em;
  line-height: 0;
  bottom: 0;
  left:0;
  width:45%;
  text-align:right;
  
}

<div id="nextVideo" onclick="forwardVideo();">
  <span class="fa fa-forward"></span>
  <img id="nextVideoImage" src="//i.ytimg.com/vi/5y_KJAg8bHI/default.jpg">
  <p id="nextVideoName">Avicii - Wake Me Up (Lyric Video)</p>
  <p id="nextVideoTime">33:15</p>
</div>

http://codepen.io/gc-nomade/pen/EVJQrp

-1

G-Cyrillus 21 नवम्बर 2015, 17:55

सामग्री की चौड़ाई की परवाह किए बिना पूर्ण स्थिति

सारांश

सवाल

3 जवाब

संबंधित सवाल

नए सवाल