如何用css發送我的文本到右邊？

我想將我的文本作爲下面的圖像發送到右側，但是當我想發送它時。它不工作，我可以修復它嗎？我的html看起來像這樣。如果有人能幫助我解決這個我會很高興如何用css發送我的文本到右邊？

這裏是HTML結構和CSS：

div#mapdiv2 { 
 
    width: 512px; 
 
} 
 

 
div#map { 
 
    width: 512px; 
 
} 
 

 
div#panodiv { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
div#panodiv2 { 
 
    width: 512px; 
 
} 
 

 
div#mapdiv2 h2, 
 
div#map h2, 
 
div#panodiv2 h2, 
 
div#pano h2 { 
 
    font-size: 15px; 
 
} 
 

 
div#mapdiv2 p, 
 
div#map p, 
 
div#panodiv2 p, 
 
div#pano p { 
 
    font-size: 11px; 
 
} 
 

 
div#pano { 
 
    width: 512px; 
 
} 
 

 
div#mapdiv2 img, 
 
div#map img, 
 
div#panodiv2 img, 
 
div#pano img { 
 
    width: 10%; 
 
}

<div class="content_feactures"> 
 
    <h1>Feacture</h1> 
 
    <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa Aenean commodo <span>ligula eget dolor Aenean commodo ligula eget dolor ligula eget dolor Aenean commodo ligula eget dolor</span></p> 
 
    <div class="wrap_feactures"> 
 
    <div class="wrap_feactures_content"> 
 
     <div id="mapdiv"> 
 
     <div id="mapdiv2"> 
 
      <img src="img/check.png"> 
 
      <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
 
      <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p> 
 
     </div> 
 
     <div id="map"> 
 
      <img src="img/check.png"> 
 
      <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
 
      <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p> 
 
     </div> 
 
     </div> 
 
     <div id="panodiv"> 
 
     <div id="panodiv2"> 
 
      <img src="img/check.png"> 
 
      <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
 
      <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p> 
 
     </div> 
 
     <div id="pano"> 
 
      <img src="img/check.png"> 
 
      <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
 
      <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

這裏是我努力實現

來源

2017-02-20 Aron Imperial

你是什麼「文本發送到正確的」，你的代碼的含義運行時顯示單個列，圖像顯示幾列 –

你的h2和p默認顯示：塊，這意味着它將佔用他們父母的100％寬度。

最簡單的辦法是包裝H2和P的分度類，並ASIGN撓到他們的父母：

<div id="pano"> 
    <img src="img/check.png"> 
    <div class="wrapper"> 
     <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
     <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p> 
    </div> 
</div>

然後CSS：

#pano { 
    display: flex; 
    width: 50%; 
    justify-content: center; 
    align-content: center; 
    text-align: left; 
} 

#pano img { 
    width: 100px; //Or what ever you want 
} 

#pano .wrapper { 
    flex: 1; 
}

重複與其他申報單。

來源

2017-02-20 21:12:47

您可以添加display:inline-block; TI的<img> CSS，也嘗試這樣的事：

<div id="mapdiv2"> 
       <img src="img/check.png"> 
       <div class="special"> 
       <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
       <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p> 
       </div> 
</div>

和

.special{ 
    width: 80%; 
    display:inline-block; 
}

玩的寬度和利潤率，直到你得到的結果你想要

來源

2017-02-20 21:13:10

我的建議是敲擊div中的文字，或給出兩個類別

<div id="map"> 
    <img src="img/check.png"> 
    <div class="text" 
    <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
    <p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p> 
    </div> 
</div>

CSS

div#map img { 
    width: 10%; 
    float: left; 
} 
div#map .text { 
    width: 90%; /*or any width*/ 
    float: rigth; 
}

使用花車引導他們到你希望他們SATY 這應該工作

來源

2017-02-20 21:14:31

如何用css發送我的文本到右邊？

回答

相關問題