Come allineare il testo sul lato destro di un img senza utilizzare float: a sinistra in modo che non cambi l'altezza div padre predefinita

Question

Come allineare il testo sul lato destro dell'icona dell'immagine come quello nell'immagine di esempio.

Io di solito uso "float:left", ma è per un responsive design cellulare in modo che non preferisco usare cose come "float:left" perché rovina il rosso div s altezza con disegni reattivi.

Devo allineare il titolo, il sottotitolo e una piccola immagine quadrata.

Answer 1

E 'facile da usare float: left e non rompere l'altezza del div bordo rosso.

basta aggiungere display: table-cell al blocco .app_top. Ecco la soluzione:

.app_top { 
    display: table-cell; 
} 
.app_top img { 
    float: left; 
} 

Vedere l'esempio di lavoro. Here's the code.

Answer 2

Forse un'altra opzione è quella di mettere l'attributo in un div genitore al posto dell'elemento

html:

<div id="wrapper"> 
    <div class="twoColumn"> 
     <img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" /> 
    </div> 
    <div class="twoColumn"> 
     <p> this is a testingalot test</p> 
      <button> mybutton </button> 

    </div> 
</div 

css:

#wrapper{ 
    border: 1px solid black; 
} 
.twoColumn{ 
    width: 49%; 
    float:left; 
    border: 1px solid red; 
} 
button{ 
    width: 50px; 
    height: 40px; 
    background: red; 
} 

img{ 
    max-width: 100%; 
} 

http://jsfiddle.net/Equero/df2wvcet/

Spero che sia aiuto

Answer 3

È possibile utilizzare invece display: inline-block.

#main-container { 
 
    border: 5px solid #3F3F3F; 
 
    width: 270px; 
 
} 
 
.container { 
 
    width: 250px; 
 
    height: 200px; 
 
    border: 5px solid #7F0008; 
 
    margin: 5px; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 85px; 
 
    height: 85px; 
 
    background: #446C74; 
 
    margin: 5px; 
 
} 
 
.content { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.title, .sub-title { 
 
    margin: 0; 
 
    padding: 3px 10px 3px 0; 
 
} 
 
.title { 
 
    font-size: 17px; 
 
    font-weight: bold; 
 
} 
 
.sub-title { 
 
    font-weight: bold; 
 
    color: #3F3F3F; 
 
} 
 
.img { 
 
    background: url(http://placehold.it/100/25); 
 
    width: 100px; 
 
    height: 25px; 
 
    border: 5px solid #EBEAAE; 
 
}

<div id="main-container"> 
 
    <div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="content"> 
 
     <p class="title">Title</p> 
 
     <p class="sub-title">Sub-Title</p> 
 
     <div class="img"></div> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="content"> 
 
     <p class="title">Title</p> 
 
     <p class="sub-title">Sub-Title</p> 
 
     <div class="img"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

soluzione più semplice sarebbe quella di modificare la struttura di markup avvolgendo il spans in un div proprio come avete fatto con l'immagine, quindi aggiungere .app_top div{display:inline-block} .app_top div span{display:block}

.top{ 
 
\t width: 95%; 
 
\t position: fixed; 
 
\t background-color: #f7f7f7; 
 
\t padding-top: 10px; 
 
\t padding-bottom: 10px; 
 
\t padding-left: 3%; 
 
\t padding-right: 3%; 
 
\t border-bottom: 1px solid #b2b2b2; 
 
} 
 

 
.search{ 
 
\t width: 100%; 
 
\t -webkit-border-radius: 4px; 
 
\t -moz-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t border: none; 
 
\t background-color: #e3e3e6; 
 
} 
 

 
.search::-moz-focus-inner { 
 
    border: 0; 
 
    padding: 0; 
 
} 
 

 
.items{ 
 
\t background-color: #ffffff; 
 
\t width: 100%; 
 
\t padding-top: 50px; 
 
} 
 

 
.app{ 
 
\t margin-left: 25px; 
 
\t margin-right: 25px; 
 
} 
 
.app_top div{display:inline-block} 
 
.app_top div span{display:block}

<div class="main"> 
 
\t 
 
\t <div class="top" > 
 
\t \t <input type="text" class="search" /> 
 
\t </div> 
 

 
<!-- Items --> 
 

 
\t <div class="items" style="border: 1px solid black; padding-top: "> 
 
\t \t 
 
\t \t <div class="app" style="border: 1px solid red;" > 
 
\t \t 
 
\t \t <div class="app_top"> 
 
\t \t \t <div> 
 
\t \t \t \t <img src="_img1.jpg" width="95"/> 
 
\t \t \t </div> 
 
\t \t \t <div> 
 
       <span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span> 
 
\t \t \t <span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span> 
 
\t \t \t <span class="" style="border: 1px solid blue;"> </span> 
 
      </div> 
 
\t \t </div> 
 
\t \t <div class="app_bottom"> 
 
\t \t 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 5

.contenuto del contenuto ins tutti i testi nella parte destra. Se usi overflow: nascosto l'altezza di div resterà normale.

img { float:left; } 
.content { overflow:hidden; }