在div容器的右邊對齊文本

Question

CSS

div_p {
}
.img_block {
  display: inline-block;
  position: relative; 
}
.img_o {
  width: 100px;
  height: 100px;
  float: left;
}
.img_i {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50px;
  height: 50px;
}

HTML

<div>
  <div class="img_block gwd-div-0pxe">
    <img class="img_o" src="images/scene1.jpg">
    <img class="img_i" src="images/scene2.jpg"><span style="position:absolute;        top:10px;right:10px;">100</span>

  </div>
  <div class="div_p"><p>hi hello how are you</p></div>
  <div class="img_block">
    <img class="img_o" src="images/scene2.jpg">
    <img class="img_i" src="images/scene3.jpg"><span style="position:absolute; top:10px; right:10px;">100</span>

  </div>
  <div class="div_p"><p>hi hello how are you</p></div>
  <div class="img_block">
    <img class="img_o" src="images/scene4.jpg">
    <img class="img_i" src="images/scene5.jpg"><span style="position:absolute; top:10px; right:10px;">100</span>

  </div>
  <div class="div_p"><p>hi hello how are you</p></div>
</div>

我需要將div_p類的文本div_p圖像的右側，但當前通過此代碼將其放置在圖像下方。

Answer 1

將圖像設置為向左浮動。

.img_block {
    float: left;
}

Answer 2

試試吧

<div class="img_block">
    <img class="img_o" src="images/scene2.jpg">
    <img class="img_i" src="images/scene3.jpg"><span style="position:absolute; top:10px; right:10px;">100</span>
    <div class="div_p"><p>hi hello how are you</p></div>
  </div>

Answer 3

嘗試這個：

.div_p p {
    float: right;
    max-width: 80px;
    min-width: 80px;
}

.img_o {
    float: left;
    max-width: 400px;
    min-width: 400px;
}

並使用max-width限制其寬度，這樣它就不會出現在文本容器中。 文本將保留在那里。

這是小提琴： http : //jsfiddle.net/afzaal_ahmad_zeeshan/e2u4y/1/

Answer 4

你應該申請

.div_p {
float: left;
}

要么

.div_p {
position: absolute;
right: 10px; /* or whatever you want */
}

然后按照您想要的樣式進行樣式設置