How to leave vertical line the size of the div

Asked

Viewed 365 times

0

Well I wanted to leave the vertical line of '' the size of the main div, and the text is after the line, same as the beginning.

.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>

css

  • I don’t quite understand what you want @Hugoborges. Which line?

  • the 'border-right: 1px Solid #D7D7D7;' of the '<div class="img">' note that it does not go to the end of the parent div and the text is not on the right side of it.

2 answers

2


To make the element .img have a height: 100% valid, is turning it into position: absolute and removing the float: left.

The element .txt now you’ll need a margin-left to adapt.

Upshot:

.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>

  • perfect, thank you very much

0

Are you using angular material? if you are using just put the <div layout="row"> with the son <div flex>Item da coluna</div>.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.