समस्या: मुझे इन LI को बहुत विशिष्ट तरीके से व्यवस्थित करना है। यहाँ छवि है:

Here is the image

लेकिन मैं बक्सों को तोड़ता नहीं दिख रहा। मैंने फ्लेक्सबॉक्स, क्लियरफिक्स, आदि की कोशिश की है ... कोई भाग्य नहीं।

कृपया तस्वीर को देखें ताकि आप देख सकें कि मैं इस रूप को कैसे बना सकता हूं।

* {

    box-sizing: border-box;
}


a {
    color: #777777;
}

html, body {
    height: 100%;

}


#wrap {
    margin: 0 auto;
    text-align: center;
    width: 960px;
}

.contentBox {
    margin: 0 auto;
    width: 960px;
    height: 80%;
    background-color: #ffffff;
    border: #dddddd;
    border-style: solid;
    border-width: .01em;
}

#firstName {
    color: white;
    margin: 0 auto;
    background-color: #4aaaa5;
    width: 300px;
    height: 85px;
    float: left;
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 250%;
    text-align: center;
}


#menu {
    color: #777777;
    background-color: #ffffff;
    width: 300px;
    height: 85px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    float: right;
    display: flex;
    justify-content: space-between;
    align-items: center;

}


hr {
    clear: both;
    border-width: .03em;
    border-bottom-style: solid;
    margin: 0 auto;
    width: 100%;
    align-self: center;
    border-color: #777777;
}


#backgroundTest {
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
    background-repeat: repeat;
    padding: 70px;
    height: calc(100% - 87px);
}


#portfolioWrap {
    margin: 0 auto;
    width: 960px;
    background-color: #ffffff;
    border: #dddddd;
    border-style: solid;
    border-width: .01em;
}

.contentHeading {
    clear: both;
    color: #4aaaa5;
    margin: 15px 0 15px 15px;
}

.grayLine {
    margin: 15px auto;
    color: #777777;
    width: 930px;
    border-width: 1px;
    align-self: center;
}

#footerBox {
    margin-top: 50px;
    width: 100%;
    background-color: #666666;
    height: 4rem;
    border-top-style: solid;
    border-top-color: #4aaaa5;
    border-top-width: 10px;
    align-self: center;
    bottom: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

}

#copyright {
    text-align: center;
    color: white;
    overflow: hidden;
}

body {
    margin: 0 auto;
}

#robImage {
    width: 200px;
    height: 200px;
    float: left;
    margin: 0px 15px 0px 15px;
}

p {
    color: #777777;
    text-align: left;
    margin-left: 15px;
    margin-right: 15px;
    word-spacing: 3px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;

}


#footerLine {
    color: #4aaaa5;
}


#cr1 {
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

/* contact us page CSS */

#contentPadding {
    background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
    background-repeat: repeat;
    padding: 70px;
    height: 100%;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
    width: 100%;
    /* Full width */
    padding: 12px;
    /* Some padding */
    border: 1px solid #cccccc;
    /* Gray border */
    border-radius: 4px;
    /* Rounded borders */
    box-sizing: border-box;
    /* Make sure that padding and width stays in place */
    margin-top: 6px;
    /* Add a top margin */
    margin-bottom: 16px;
    /* Bottom margin */
    resize: vertical
        /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4aaaa5;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #4aaaa5;
    font-family: Arial, Helvetica, sans-serif;
}

/* Add a background color and some padding around the form */

.container {
    border-radius: 5px;
    border-color: #cccccc;
    background-color: #ffffff;
    padding: 20px;
    align-self: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #777777;
}


/* start of portfolio css */

/*
#boxClass {
    
    display: flex;
    width: 540px;
    height: 800px;
    align-items: flex-start;
    justify-content: space-between;
    text-align: center; */


#boxTitleHangman {
    list-style: none;
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
    }

#hangmanText {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 80px;
    right: 15px;
    line-height: 40px;
    }



#boxTitleTrivia {
    list-style: none;
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
    }

#triviaText {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 80px;
    right: 15px;
    line-height: 40px;
    }

#boxTitleRock {
    list-style: none;
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}

#rockText {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 80px;
    right: 15px;
    line-height: 40px;

    }

#boxTitleRpg {
    list-style: none;
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 80px;
    right: 15px;
    line-height: 40px;
    }


#boxTitleRutgers {
    list-style: none;
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}

#rutgersText {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 80px;
    right: 15px;
    line-height: 40px;
    }


.portfolioTitle {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 100px;
    right: 15px;
    line-height: 40px;
    }

#hangmanBackground {
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
}

#triviaBackground {
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
}

#rockBackground {
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
}

#rpgBackground {

    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
}

#rutgersBackground {
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Rob Connolly's Portfolio</title>
    <link rel="stylesheet" href="./assets/css/style.css">

</head>

<body>

    <!-- this div contains the header-->
    <div id="wrap">

        <header>
            <!-- name in header-->
            <h1 id="firstName">
                Rob Connolly
            </h1>
        </header>
        <!-- Header-->
        <div id="menu">

            <span>
                <a href="./index.html">About</a>
            </span>

            <span>
                <a href="./portfolio.html"> Portfolio</a>
            </span>

            <span>
                <a href="./contact.html">Contact</a>
            </span>


        </div>
    </div>

    <!-- clear fix cleard float-->
    <hr id="clearfix">

    <!-- background image-->
    <div id="backgroundTest">

        <!-- Wrap2 wraps portfolio content section-->
        <div class="contentBox">

            <!-- Portfolio Heading-->
            <h2 class="contentHeading">
                Portfolio
            </h2>
            <!-- gray line in about me section-->
            <hr class="grayLine">

            <!-- Portfolio Form-->



            <ul id="boxList">

                <li id="boxTitleHangman">
                    <p id="hangmanText">
                        Hangman
                    </p>
                </li>

                <li id="boxTitleTrivia">
                    <p id="triviaText">
                        Trivia
                    </p>
                </li>
                <li id="boxTitleRock">
                    <p id="rockText">
                        Rock
                    </p>
                </li>

                <li id="boxTitleRpg">
                    <p id="rpgText">
                        Rpg
                    </p>
                </li>

                <li id="boxTitleRutgers">
                    <p id="rutgersText">
                        Rutgers
                    </p>
                </li>

            </ul>

            <!-- 
                <div id="hangman">
                <div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
                    <p class="portfolioTitle">Hangman</p>
                </div>

                <div id="trivia">
                    <div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
                        <p class="portfolioTitle">Trivia Game</p>
                    </div>

                    <div id="rock">
                        <div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
                            <p class="portfolioTitle">Rock Paper Scissors</p>
                        </div>
                    </div>

                    <div id="row2">
                        <div id="rpg">
                            <div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
                                <p class="portfolioTitle">RPG Game</p>
                            </div>

                            <div id="rutgers">
                                <div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
                                    <p class="portfolioTitle">Rutgers Info Widget</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                </div> -->

            <!-- Start of footer-->
            <div id="footerBox">
                <!-- Text for footer-->
                <p id="cr1"> &copy; Copyright</p>

            </div>
        </div>
    </div>
    </div>

</body>
</html>
0
RobC 19 पद 2019, 10:03
क्या आपको वास्तव में उन्हें एलआई होने की आवश्यकता है? यह बस divs के साथ किया जा सकता है।
 – 
Jerdine Sabio
19 पद 2019, 10:17
इससे कोई फर्क नहीं पड़ता कि यह <li> या <div> तत्व है, सभी को उसी तरह स्टाइल किया जा सकता है। LI शब्दार्थ से बेहतर हो सकता है।
 – 
cloned
19 पद 2019, 11:55

3 जवाब

SO में आपका स्वागत है, ul पर इसका सरल उपयोग column-count: संपत्ति

यहाँ अद्यतन स्निपेट है।

* {

    box-sizing: border-box;
}


a {
    color: #777777;
}

html, body {
    height: 100%;

}


#wrap {
    margin: 0 auto;
    text-align: center;
    width: 960px;
}

.contentBox {
    margin: 0 auto;
    width: 960px;
    height: 100vh;
    background-color: #ffffff;
    border: #dddddd;
    border-style: solid;
    border-width: .01em;
}
#firstName {
    color: white;
    margin: 0 auto;
    background-color: #4aaaa5;
    width: 300px;
    height: 85px;
    float: left;
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 250%;
    text-align: center;
}


#menu {
    color: #777777;
    background-color: #ffffff;
    width: 300px;
    height: 85px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    float: right;
    display: flex;
    justify-content: space-between;
    align-items: center;

}


hr {
    clear: both;
    border-width: .03em;
    border-bottom-style: solid;
    margin: 0 auto;
    width: 100%;
    align-self: center;
    border-color: #777777;
}


#backgroundTest {
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
    background-repeat: repeat;
    padding: 70px;
    height: 100vh;
}


#portfolioWrap {
    margin: 0 auto;
    width: 960px;
    background-color: #ffffff;
    border: #dddddd;
    border-style: solid;
    border-width: .01em;
}

.contentHeading {
    clear: both;
    color: #4aaaa5;
    margin: 15px 0 15px 15px;
}
#boxList{
column-count: 2;
}

.grayLine {
    margin: 15px auto;
    color: #777777;
    width: 930px;
    border-width: 1px;
    align-self: center;
}

#footerBox {
    margin-top: 50px;
    width: 100%;
    background-color: #666666;
    height: 4rem;
    border-top-style: solid;
    border-top-color: #4aaaa5;
    border-top-width: 10px;
    align-self: center;
    bottom: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

}

#copyright {
    text-align: center;
    color: white;
    overflow: hidden;
}

body {
    margin: 0 auto;
}

#robImage {
    width: 200px;
    height: 200px;
    float: left;
    margin: 0px 15px 0px 15px;
}

p {
    color: #777777;
    text-align: left;
    margin-left: 15px;
    margin-right: 15px;
    word-spacing: 3px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;

}


#footerLine {
    color: #4aaaa5;
}


#cr1 {
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

/* contact us page CSS */

#contentPadding {
    background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
    background-repeat: repeat;
    padding: 70px;
    height: 100%;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
    width: 100%;
    /* Full width */
    padding: 12px;
    /* Some padding */
    border: 1px solid #cccccc;
    /* Gray border */
    border-radius: 4px;
    /* Rounded borders */
    box-sizing: border-box;
    /* Make sure that padding and width stays in place */
    margin-top: 6px;
    /* Add a top margin */
    margin-bottom: 16px;
    /* Bottom margin */
    resize: vertical
        /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4aaaa5;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #4aaaa5;
    font-family: Arial, Helvetica, sans-serif;
}

/* Add a background color and some padding around the form */

.container {
    border-radius: 5px;
    border-color: #cccccc;
    background-color: #ffffff;
    padding: 20px;
    align-self: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #777777;
}


/* start of portfolio css */

/*
#boxClass {
    
    display: flex;
    width: 540px;
    height: 800px;
    align-items: flex-start;
    justify-content: space-between;
    text-align: center; */


#boxTitleHangman {
    list-style: none;
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
    }

#hangmanText {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 80px;
    right: 15px;
    line-height: 40px;
    }



#boxTitleTrivia {
    list-style: none;
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
    }

#triviaText {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 80px;
    right: 15px;
    line-height: 40px;
    }

#boxTitleRock {
    list-style: none;
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}

#rockText {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 80px;
    right: 15px;
    line-height: 40px;

    }

#boxTitleRpg {
    list-style: none;
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 80px;
    right: 15px;
    line-height: 40px;
    }


#boxTitleRutgers {
    list-style: none;
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
    background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}

#rutgersText {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 80px;
    right: 15px;
    line-height: 40px;
    }


.portfolioTitle {
    background: #4aaaa5;
    width: 200px;
    height: 40px;
    color: white;
    text-align: center;
    align-items: center;
    position: relative;
    top: 100px;
    right: 15px;
    line-height: 40px;
    }

#hangmanBackground {
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
}

#triviaBackground {
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
}

#rockBackground {
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
}

#rpgBackground {

    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
}

#rutgersBackground {
    height: 150px;
    width: 200px;
    margin: 10px 15px 30px 15px;
    background-size: 100%;
    float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Rob Connolly's Portfolio</title>
    <link rel="stylesheet" href="./assets/css/style.css">

</head>

<body>

    <!-- this div contains the header-->
    <div id="wrap">

        <header>
            <!-- name in header-->
            <h1 id="firstName">
                Rob Connolly
            </h1>
        </header>
        <!-- Header-->
        <div id="menu">

            <span>
                <a href="./index.html">About</a>
            </span>

            <span>
                <a href="./portfolio.html"> Portfolio</a>
            </span>

            <span>
                <a href="./contact.html">Contact</a>
            </span>


        </div>
    </div>

    <!-- clear fix cleard float-->
    <hr id="clearfix">

    <!-- background image-->
    <div id="backgroundTest">

        <!-- Wrap2 wraps portfolio content section-->
        <div class="contentBox">

            <!-- Portfolio Heading-->
            <h2 class="contentHeading">
                Portfolio
            </h2>
            <!-- gray line in about me section-->
            <hr class="grayLine">

            <!-- Portfolio Form-->



            <ul id="boxList">

                <li id="boxTitleHangman">
                    <p id="hangmanText">
                        Hangman
                    </p>
                </li>

                <li id="boxTitleTrivia">
                    <p id="triviaText">
                        Trivia
                    </p>
                </li>
                <li id="boxTitleRock">
                    <p id="rockText">
                        Rock
                    </p>
                </li>

                <li id="boxTitleRpg">
                    <p id="rpgText">
                        Rpg
                    </p>
                </li>

                <li id="boxTitleRutgers">
                    <p id="rutgersText">
                        Rutgers
                    </p>
                </li>

            </ul>

            <!-- 
                <div id="hangman">
                <div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
                    <p class="portfolioTitle">Hangman</p>
                </div>

                <div id="trivia">
                    <div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
                        <p class="portfolioTitle">Trivia Game</p>
                    </div>

                    <div id="rock">
                        <div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
                            <p class="portfolioTitle">Rock Paper Scissors</p>
                        </div>
                    </div>

                    <div id="row2">
                        <div id="rpg">
                            <div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
                                <p class="portfolioTitle">RPG Game</p>
                            </div>

                            <div id="rutgers">
                                <div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
                                    <p class="portfolioTitle">Rutgers Info Widget</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                </div> -->

            <!-- Start of footer-->
            <div id="footerBox">
                <!-- Text for footer-->
                <p id="cr1"> &copy; Copyright</p>

            </div>
        </div>
    </div>
    </div>

</body>
</html>
0
Awais 19 पद 2019, 10:22

मेरा सुझाव है कि आप उस आईडी का उपयोग करें जिसे आपने <ul> टैग यानी बॉक्सलिस्ट दिया है और फिर डिस्प्ले को फ्लेक्स के रूप में इस तरह से लागू करें कि आपके सभी li तत्व एक फ्लेक्स बॉक्स में होंगे। फिर <li> तत्वों के साथ काम करें फ्लेक्स बॉक्स तत्व यहां एक लिंक है जो आपकी मदद कर सकता है: -

https://www.w3schools.com/css/css3_flexbox.asp

मैं आपको ग्रिड का उपयोग करने की अत्यधिक अनुशंसा करता हूं क्योंकि यह अधिक उपयोगी हो सकता है और मुझे यह फ्लेक्स बॉक्स से बेहतर पसंद है, यहां वह लिंक है जिसका उपयोग आप ग्रिड बॉक्स का उपयोग करने के लिए कर सकते हैं: -

https://www.w3schools.com/css/css_grid.asp

0
Mr Lister 19 पद 2019, 10:25

ग्रिडव्यू

<ul class="gridview grid-3">
    <li><p>Hello<br>Hello</p></li>
    <li><p>Hello<br>Hello<br>Hello<br>Hello</p></li>
    <li><p>Hello</p></li>
    <li><p>Hello<br>Hello<br>Hello</p></li>
    <li><p>Hello</p></li>
    <li><p>Hello<br>Hello</p></li>
    <li><p>Hello</p></li>
    <li><p>Hello<br>Hello<br>Hello</p></li>
    <li><p>Hello</p></li>
    <li><p>Hello<br>Hello</p></li>
</ul>
ul.gridview > li {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}

ul.gridview > li p {
    background: #ddd;
    padding: 5px;
    margin: 0;
}

/* Grid-3 */
ul.grid-3 > li {
    width: calc(100% / 3 - 2 * 10px / 3);
}
ul.grid-3 > li:nth-child(n + 4) {
    margin-top: 10px;
}
ul.grid-3 > li:nth-child(3n + 1) {
    clear: left;
}
ul.grid-3 > li:not(:nth-child(3n + 1)) {
    margin-left: 10px;
}

/* Grid-4 */
ul.grid-4 > li {
    width: calc(100% / 4 - 3 * 10px / 4);
}
ul.grid-4 > li:nth-child(n + 5) {
    margin-top: 10px;
}
ul.grid-4 > li:nth-child(4n + 1) {
    clear: left;
}
ul.grid-4 > li:not(:nth-child(4n + 1)) {
    margin-left: 10px;
}

कोडपेन

0
Văn Quyết 19 पद 2019, 10:45