Mejor enfoque para la barra de perfil de usuario

Actualmente estoy atascado con un pequeño problema aquí. He usado un marcado como este:

Retazo

$(function () { $(".more-options").click(function () { $(this).closest(".user-profile").toggleClass("open"); return false; }); }); 
 /* Reset */ * {margin: 0; padding: 0; list-style: none; font-size: 12pt;} a {text-decoration: none;} /* Main CSS */ .user-profile {border: 1px solid #999; overflow: hidden; position: relative; margin: 25px 0;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; float: left;} .user-profile p:first-child {margin: 3px 0 0;} .user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;} .user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff;} .user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;} .user-profile .more-options-list li a {padding: 5px;} .user-profile.open .more-options-list {display: block;} .user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;} /* Testing Sizes */ .user-profile.default {width: 250px;} .user-profile.mobile {width: auto;} .user-profile.large {width: 500px;} .user-profile.small {width: 100px;} /* Background Image, Can be ignonetworking. */ .user-profile .more-options {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/FtFl+u4tgAAAVNJREFUKBV9kT9Lw1AUxfNeUxDc1N2CQ0kNDhqUbq46K4izg4PgLugHECdF6qBTcdJNxNFFVMQ6lbTQIX4BF5cI0cbfLb1SatILyb33vHPO+3NNmqaO53nVQqFQdRznpdlsPpBHhu/7i91ud85a+wg/NJVKZRtFTVWYXsRxvBNF0ZdimoMgKLJ2TC8aiW9jzIaYvNNMC6KB0Rs7rbXb7Uixcrk8xWmvEC0rJhluw/IrDoJSQ5xH8MoGq9LPEq7rPg8b9LnjluJImoyYALvB6JyNnqhnMjiy4amB4EDcgnACMJZFzMEStLthGNZ6JkJiQguYXPOVpB8ViD+YzDqTuReeXKcXrVarwWJAc9eH8lLIey2pgZD+TqIKTmK53j6GB1IrLhnsNkmSzU6n8zmI/zPRRQaygqiO0WTf4JDT7oH9KEdzrokQeKcSJpeUZzxgXUXD+RcR85AyRBGQ7AAAAABJRU5ErkJggg==");} 
 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <div class="user-profile default"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile mobile"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile large"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile small"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> 

Problema

Estoy tratando de diseñar una barra de perfil de usuario , que cuando esté en vivo debería ser de esta manera:

Esto es lo que trato de lograr aquí, cuando se hace clic en el button. Y también lo que sucede es que el menu no se muestra, porque he usado overflow: hidden; para limpiar el float s. El menu está escondido adentro.

Me gustaría que fuera receptivo (bueno, solo usando porcentajes de width en diferentes resoluciones de pantalla e instancias), me gustaría que se muestren de esta manera:

¿Hay una mejor manera de lograrlo? Además, no estoy seguro de cómo podría mostrar los puntos suspensivos, si el tamaño es demasiado pequeño, vea la class de mobile en el fragment.

Avance

Para aquellos que no pueden get una vista previa del fragment, se mostraría de esta manera:

Vista pnetworkingeterminada.

Se ha hecho clic en la flecha.

Necesitas usar la position ing para este caso. Este es un caso de model de fluido fijo :

 +-------+-----------+ | FIXED | FLUUUUUID | +-------+-----------+ 

O

 +-------+-----------+ | FIXED | FLUUUUUID | | | FLUUUUUID | +-------+-----------+ 

Para hacer frente a esto, debe hacer que el contenido fixed se posicione de forma absolute y supongo que, al tratarse de un contenido fijo, seguramente conocerá las dimensiones. Y proporcione la position: relative padre position: relative y un padding-left y min-height de esas dimensiones. Nunca debe usar overflow: hidden o float s en este caso. Así que elimine ambos de su CSS y realice estos cambios:

 .user-profile {border: 1px solid #999; position: relative; margin: 25px 0;} /* Remove overflow: hidden; */ .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px;} /* Remove float: left; */ 

En cambio, como se dijo anteriormente, agregue padding , min-height para el elemento primario y position: absolute para el elemento secundario:

 .user-profile {border: 1px solid #999; position: relative; margin: 25px 0; padding-left: 68px; min-height: 68px;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; position: absolute; top: 0; left: 0;} 

El misterioso 68px :

El 68px se calcula de esta manera:

  • Margen izquierdo: 5px
  • Borde izquierdo: 1px
  • Relleno izquierdo: 3px
  • Ancho: 50px
  • Relleno derecho: 3px
  • Margen derecho: 1px
  • Borde derecho: 5px

Entonces, 5px + 1px + 3px + 50px + 3px + 1px + 5px = 68px .

Elipsis de text

Para que las elipsis funcionen en los principales browseres, puede usar el siguiente código:

 (selector) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

Solo agregue esto a la regla .user-profile p :

 .user-profile p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 

Además, siempre es mejor tener un z-index en su lugar para la position: absolute elementos position: absolute para que funcionen bien con otros elementos similares. Así que por favor agrega:

 .user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff; z-index: 1;} 

Entonces, el código final sería:

 $(function () { $(".more-options").click(function () { $(this).closest(".user-profile").toggleClass("open"); return false; }); }); 
 /* Reset */ * {margin: 0; padding: 0; list-style: none; font-size: 12pt;} a {text-decoration: none;} /* Main CSS */ .user-profile {border: 1px solid #999; position: relative; margin: 25px 0; padding-left: 68px; min-height: 68px;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; position: absolute; top: 0; left: 0;} .user-profile p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .user-profile p:first-child {margin: 3px 0 0;} .user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;} .user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff; z-index: 1;} .user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;} .user-profile .more-options-list li a {padding: 5px;} .user-profile.open .more-options-list {display: block;} .user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;} /* Testing Sizes */ .user-profile.default {width: 250px;} .user-profile.mobile {width: auto;} .user-profile.large {width: 500px;} .user-profile.small {width: 100px;} /* Background Image, Can be ignonetworking. */ .user-profile .more-options {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/FtFl+u4tgAAAVNJREFUKBV9kT9Lw1AUxfNeUxDc1N2CQ0kNDhqUbq46K4izg4PgLugHECdF6qBTcdJNxNFFVMQ6lbTQIX4BF5cI0cbfLb1SatILyb33vHPO+3NNmqaO53nVQqFQdRznpdlsPpBHhu/7i91ud85a+wg/NJVKZRtFTVWYXsRxvBNF0ZdimoMgKLJ2TC8aiW9jzIaYvNNMC6KB0Rs7rbXb7Uixcrk8xWmvEC0rJhluw/IrDoJSQ5xH8MoGq9LPEq7rPg8b9LnjluJImoyYALvB6JyNnqhnMjiy4amB4EDcgnACMJZFzMEStLthGNZ6JkJiQguYXPOVpB8ViD+YzDqTuReeXKcXrVarwWJAc9eH8lLIey2pgZD+TqIKTmK53j6GB1IrLhnsNkmSzU6n8zmI/zPRRQaygqiO0WTf4JDT7oH9KEdzrokQeKcSJpeUZzxgXUXD+RcR85AyRBGQ7AAAAABJRU5ErkJggg==");} 
 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <div class="user-profile default"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile mobile"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile large"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile small"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> 

El problema es que no desea ocultar el desbordamiento, desea establecer un context de formatting de bloque. Y sí, overflow: hidden establece un BFC como efecto secundario, pero eso es solo un truco. En CSS2.1 hay otras forms de establecer un BFC, pero todas tienen sus propios problemas, como tomar out-of-flow, estar en línea, …

La pantalla L3 presenta una forma adecuada de establecer BFC:

 display: flow-root; 

Pero los browseres aún no lo admiten. Mientras tanto, recomiendo hacks de liquidación:

 .wrapper::after { content: ''; clear: both; display: block; } 
 $(function () { $(".more-options").click(function () { $(this).closest(".user-profile").toggleClass("open"); return false; }); }); 
 .user-profile:after { content: ''; clear: both; display: block; } /* Reset */ * {margin: 0; padding: 0; list-style: none; font-size: 12pt;} a {text-decoration: none;} /* Main CSS */ .user-profile {border: 1px solid #999; position: relative; margin: 25px 0;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; float: left;} .user-profile p:first-child {margin: 3px 0 0;} .user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;} .user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff;} .user-profile .more-options-list li, .user-profile .more-options-list li a {display: block;} .user-profile .more-options-list li a {padding: 5px;} .user-profile.open .more-options-list {display: block;} .user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;} /* Testing Sizes */ .user-profile.default {width: 250px;} .user-profile.mobile {width: auto;} .user-profile.large {width: 500px;} .user-profile.small {width: 100px;} /* Background Image, Can be ignonetworking. */ .user-profile .more-options {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/FtFl+u4tgAAAVNJREFUKBV9kT9Lw1AUxfNeUxDc1N2CQ0kNDhqUbq46K4izg4PgLugHECdF6qBTcdJNxNFFVMQ6lbTQIX4BF5cI0cbfLb1SatILyb33vHPO+3NNmqaO53nVQqFQdRznpdlsPpBHhu/7i91ud85a+wg/NJVKZRtFTVWYXsRxvBNF0ZdimoMgKLJ2TC8aiW9jzIaYvNNMC6KB0Rs7rbXb7Uixcrk8xWmvEC0rJhluw/IrDoJSQ5xH8MoGq9LPEq7rPg8b9LnjluJImoyYALvB6JyNnqhnMjiy4amB4EDcgnACMJZFzMEStLthGNZ6JkJiQguYXPOVpB8ViD+YzDqTuReeXKcXrVarwWJAc9eH8lLIey2pgZD+TqIKTmK53j6GB1IrLhnsNkmSzU6n8zmI/zPRRQaygqiO0WTf4JDT7oH9KEdzrokQeKcSJpeUZzxgXUXD+RcR85AyRBGQ7AAAAABJRU5ErkJggg==");} 
 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <div class="user-profile default"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile mobile"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile large"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div> <div class="user-profile small"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>Username</strong></a></p> <p><span>Designation</span></p> </div> <a href="#" class="more-options">More Options</a> <ul class="more-options-list"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Log Out</a></li> </ul> </div>