0

Bom queria deixar a linha vertical da '' do tamanho da div principal, e que o texto fique depois da linha, igual ao começo.

.font-15, input, textarea, select, .container-head, .se-pre-con p, .dialogboxbody, .top_menu .scroll div, .autocomplete-suggestion .txt {
    font-size: 15px;
}
.shadow-2, .bt:hover, .context_menu_pai, .box_login, .datepicker.dropdown-menu, .dialogbox, .overflow-menu ul, .autocomplete-suggestions {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.material-icons.large {
    font-size: 6rem;
    width: 6rem;
    overflow: hidden;
}
.autocomplete-suggestions {
    text-align: left;
    cursor: default;
    border-top: 0;
    background: #FFFFFF;
    position: absolute;
    max-height: 254px;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}
.autocomplete-suggestion {
  width: 300px;
    position: relative;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.02em;
    color: #484848;
    border-bottom: 1px solid #D7D7D7;
}
.autocomplete-suggestion .img {
    float: left;
    width: 100px;
    height: 100%;
    border-right: 1px solid #D7D7D7;
    background: #FFFFFF;
    margin-right: 15px;
}
<!-- Material Icons (Google) -->

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="autocomplete-suggestions">
    <div class="autocomplete-suggestion">
        <div class="img"><i class="material-icons large">face</i>
        </div>
        <div class="txt">
            <div>DES NIVEA ROLL-ON FEM. SENSITIVE wer rwerwrw werwe rwer we rwerwer we r wer wer wer we rew r we PURE 50ML</div>
            TEXTO EXTRA
        </div>
    </div>
</div>

2
  • Eu não compreendi muito bem o que queres @HugoBorges. Qual linha?
    – BrTkCa
    Commented 29/12/2016 às 20:37
  • o 'border-right: 1px solid #D7D7D7;' da '<div class="img">' note que ela não vai ate o fim da div pai e o texto não fica do lado direito dela. Commented 29/12/2016 às 20:41

2 Respostas 2

2

Para conseguir fazer o elemento .img ter um height: 100% válido, é transformando ele em position: absolute e removendo o float: left.

O elemento .txt agora vai precisar de um margin-left para se adaptar.

Resultado:

.font-15, input, textarea, select, .container-head, .se-pre-con p, .dialogboxbody, .top_menu .scroll div, .autocomplete-suggestion .txt {
    font-size: 15px;
}
.shadow-2, .bt:hover, .context_menu_pai, .box_login, .datepicker.dropdown-menu, .dialogbox, .overflow-menu ul, .autocomplete-suggestions {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.material-icons.large {
    font-size: 6rem;
    width: 6rem;
    overflow: hidden;
}
.autocomplete-suggestions {
    text-align: left;
    cursor: default;
    border-top: 0;
    background: #FFFFFF;
    position: absolute;
    max-height: 254px;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.autocomplete-suggestion .txt {
    margin-left: 115px;
}

.autocomplete-suggestion {
  width: 300px;
    position: relative;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.02em;
    color: #484848;
    border-bottom: 1px solid #D7D7D7;
}
.autocomplete-suggestion .img {
    position: absolute;
    width: 100px;
    height: 100%;
    border-right: 1px solid #D7D7D7;
    background: #FFFFFF;
    margin-right: 15px;
}
<!-- Material Icons (Google) -->

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="autocomplete-suggestions">
    <div class="autocomplete-suggestion">
        <div class="img"><i class="material-icons large">face</i>
        </div>
        <div class="txt">
            <div>DES NIVEA ROLL-ON FEM. SENSITIVE wer rwerwrw werwe rwer we rwerwer we r wer wer wer we rew r we PURE 50ML</div>
            TEXTO EXTRA
        </div>
    </div>
</div>

1
  • perfeito, muito obrigado Commented 29/12/2016 às 20:49
0

Tu está usando angular material? se estiver usando é só colocar o <div layout="row"> com o filho <div flex>Item da coluna</div>.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .