How to improve the formatting of information within my Div?

Question

How to improve the formatting of information within my Div?

Asked 6 years, 2 months ago

Viewed 62 times

1

Gentlemen, I need to format my Div according to the image attached below, with Meta information about Div, etc.

Currently my code is breaking this information into lines, as attached image.

Follow an excerpt of my code, I hope you can help me.

<div id="row1">

            <div class="squareWhite" style="width:380px; font-size: 20px; height: 160px;">
                APPLE<br></br>
                META: <c:out value="${AP.rows[0].META}"/><br></br>
                REALIZADO: <c:out value="${AP.rows[0].REALIZADO}" /><br>/br>
                ACUMULADO: <c:out value="${AP.rows[0].ACUMULADO}" />
            </div>
</div>

As you can see above, I have one main div and one inside the same.

My above code when executed returns the image information below.

But I need the information to be according to image below, as I can accomplish this change within

Send a picture of what you want to do, I don’t understand!

– Marcondes

2018/07/30 at 12:58
Good morning @Marcondes, the image of what I want to do is the second I posted in the question, the first is how it’s coming out today, here in the comment I can’t attach images again.

– Gabriel Paixão Justino

2018/07/30 at 13:01
@Gabrielpaixãojustino The first image that is the current scenario has nothing to do with the second... you need to give an example of what you want, but it has logic in relation to what you have. Give an update on the question that is more difficult to understand what you want, than answer the question.

– Leonardo Bonetti

2018/07/30 at 13:35

1 answer

Browser other questions tagged javascript html html5 div

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

by hugocsl • **65,517** points · Answer 1 · 2018-07-30T17:00:07+00:00

Gabriel there are several ways to do this.

It could be the oldest and not recommended way with floats and clearfix or even <tabel>. Or with Flexbox and Grid which is the most suitable hj on time.

I made this model using the display:grid to mount the grid on the parent, and the display:flex in the children to align everything in the center (this part of the flex is not mandatory, you can align with text-aling and line-height, is at your discretion)

Follow the example:

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-image: url(http://unsplash.it/g/380/160);
    background-size: cover;
}
.container {
    width: 380px;
    height: 160px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.container div {
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rel, .acu {
    grid-column: span 2;
    background-color: red;
}

<div id="row1">

    <div class="container">
        <div class="marca">Marca</div> 
        <div class="meta">Meta</div>
        <div class="rel">Realizado</div>
        <div class="acu">Acumulado</div>
    </div>
    
</div>