Search code examples
htmlcssline

How can I change the line of the contents of the small box?

I wonder how can I change the line after the text "version 1" "version 2" and "version 3". Those are inline, but if I change it into block or add br/ tag, the whole small boxes are broken into two parts, which is not intended. Also, even I put the contents (p and images) in the small box, why does not contain whole contents?

.frame{
    font-size: 50px;
    background-color: black;
    height: fit-content;
    color: gold;
    width: 1900px;
    text-align: center;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
.image{
    margin-top: 30px;
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    width: 50px;
    height: 50px;

}
.box{
    background-color: transparent;
    border-radius: 40;
    font-size: 36px;
    color: gold;
    border: 6px solid white;
    width: 1800px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 40px;
    margin-top: 40px;
    padding: 20px;
}
#timeline{ margin-top: 30px;
    color: white;
}

p{font-size: 22px;
    color: white;
    margin-bottom: 20px;
    border-color: white;
    text-align: center;
    display: inline-block;
}

.smallbox{
    background-color: transparent;
    border: 4px solid white;
    display: inline-block;
    border-radius: 20px;
    padding: 30px;
    width: 270px;
    height: 80px;
    text-align: center;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>subimage</title>
    <link rel="stylesheet" type="text/css" href="../css/st.css">
</head>
<body>
    <div class="frame"> Project Directory
        <div class="box">Repository
            <div><img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
            <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
            <img class="image" src="https://pixy.org/src/162/thumbs350/1625091.jpg"></div>
            <div id="timeline">------O--------------------O--------------------O------</div>
            <div class="smallbox">
                <p class="v1">version 1</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png"></div>
            <div class="smallbox">
                <p class="v2">version 2</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
                    <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
                </div>
            <div class="smallbox">
                <p class="v3">version 3</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
                    <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
                    <img class="image" src="https://pixy.org/src/162/thumbs350/1625091.jpg">
                </div>
        </div>
    </div>
</body>
</html>>

Solution

  • Make <p> display as block, remove margin from <p> and images next to it.

    .frame{
    font-size: 50px;
    background-color: black;
    height: fit-content;
    color: gold;
    width: 1900px;
    text-align: center;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
.image{
    /*margin-top: 30px;*/  /* removed */
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    width: 50px;
    height: 50px;

}
.box{
    background-color: transparent;
    border-radius: 40;
    font-size: 36px;
    color: gold;
    border: 6px solid white;
    width: 1800px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 40px;
    margin-top: 40px;
    padding: 20px;
}
#timeline{ margin-top: 30px;
    color: white;
}

p{font-size: 22px;
    color: white;
    margin-bottom: 20px;
    border-color: white;
    text-align: center;
    display: block; /* changed */
    margin: 0; /* added */
}

.smallbox{
    background-color: transparent;
    border: 4px solid white;
    display: inline-block;
    border-radius: 20px;
    padding: 30px;
    width: 270px;
    height: 80px;
    text-align: center;
}
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>subimage</title>
    <link rel="stylesheet" type="text/css" href="../css/st.css">
</head>
<body>
    <div class="frame"> Project Directory
        <div class="box">Repository
            <div><img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
            <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
            <img class="image" src="https://pixy.org/src/162/thumbs350/1625091.jpg"></div>
            <div id="timeline">------O--------------------O--------------------O------</div>
            <div class="smallbox">
                <p class="v1">version 1</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png"></div>
            <div class="smallbox">
                <p class="v2">version 2</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
                    <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
                </div>
            <div class="smallbox">
                <p class="v3">version 3</p>
                    <img class="image" src="https://www.shareicon.net/data/128x128/2015/07/26/75287_doc_512x512.png">
                    <img class="image" src="https://ehs.utoronto.ca/wp-content/uploads/2021/06/pdf-icon-2.png">
                    <img class="image" src="https://pixy.org/src/162/thumbs350/1625091.jpg">
                </div>
        </div>
    </div>
</body>
</html>>