Text box layout

Question

Text box layout

Navigation

#1 by (0 votes)

-1

I'm trying to do something like those elements from forums, which show a div with a user pic and a space with some text right, you know? I've already tried to position one on the side of the outo using float but the part of the text got crooked ... Type ... It was not centered inside your part in the contender.

.spe-layout {
    height: 210px;
    border-left: 1px solid #4774c6;
    border-bottom: 1px solid #4774c6;
    border-right: 1px solid #4774c6;
}

.spe-layout h1 {
    background-color: #4774c6;
    color: white;
    padding-bottom: 5px;
    margin-top: 0px;
}

#Dq {
    display: flex;
    flex-direction: column;
}

#parte-user {
    align-self: flex-start;
}

#foto {
    background-color: #010000;
    height: 110px;
    width: 110px;
}

<section id="Dq" class="spe-layout">
  <h1>Título</h1>
  <div id="parte-user">
    <h3>Gabriel</h3>
    <div id="foto">Foto</div>
  </div>
  <span>Texto</span>
</section>

html css layout

asked by anonymous 30.09.2016 / 04:11

1 answer

Configuring the JDK in Android Studio How to show exceptions raised in Datasnap REST Server, in the client?

score 0 · Accepted Answer

I tried to organize the code in a different way - I removed% with% 'if I subscribed to id with the thought that these' User Cards' will be used in more places, and I also tried to somehow minimize the code. / p>

When an element repeats multiple times in a document (on the same page), we should use classes and not classes 's, because id ' s are only to be used once in the entire document. More about this this link .

.userContainer {
    border: 1px solid #4774c6;
}
h1.userHeader {
    margin: 0;
    background-color: #4774c6;
    color: #fff;
    padding: 5px 0px 5px 10px;
}
.userPicture {
    float: left;
    margin-right: 16px!important;
}
.clear {clear:both;} /* Limpa/remove os floats */

<div class="userContainer">
    <h1 class="userHeader">Alexis Cooper</h1>
    <img class="userPicture" src="http://lorempixel.com/110/110/people/1/"width="110" height="110">
    <p class="userInfo">
        Random text about Alexis - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate eget tellus ut sodales.
    </p>
    <div class="clear"></div> <!-- Evita que elementos que venham a seguir peguem o float anteriormente atribuído acima. [Veja CSS] -->
</div>