How to improve the formatting of information within my Div?

Question

How to improve the formatting of information within my Div?

Navigation

#1 by (1 votes)

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 in lines, as attached image.

Here's a snippet 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 div within it.

My code above when executed returns the image information below.

ButIneedtheinformationtobeinaccordancewiththeimagebelow,howcanImakethischangein

javascript html html5 div

asked by anonymous 30.07.2018 / 14:53

1 answer

Start a function in the click and stop it when clicking again? Create a trigger to trigger whenever a field is edited mysql

score 1 · Accepted Answer

Gabriel there are several ways to do this.

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

I made this template using display:grid to mount the grid in the parent, and display:flex in the children to align everything in the center (this part of 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>