كيفية جعل العناصر تملأ الحاوية الخاصة بهم وتوزيع المساحة بشكل متناسب CSS

Mohammed Hhhh · 22 مايو 2022

لماذا هذه العناصر لاتأتي على صف واحد مثل ما هو موضح في الصوره

كود html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="pstyle.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <title>CRUDs</title>

</head>

<body>
    <div class="crud">
        <!-- ----- -->
        <div class="head">
            <h2> <img src="/project/photos/cruds.png" alt="" width="40px">
                <p>crud</p>
            </h2>
            <a target="_blank" href="/ourTeam.html" class="ourTeam">Our Team</a>
        </div>
        <!-- ----- -->

        <div class="inputs">
            <input type="text" name="" id="title" placeholder="title">
            <div class="price" >
                <input onkeyup="getTotal()" type="text" value="" id="price" placeholder="price">
                <input onkeyup="getTotal()" type="text" value="" id="taxes" placeholder="taxes">
                <input onkeyup="getTotal()" type="text" value="" id="ads" placeholder="ads">
                <input onkeyup="getTotal()" type="text" value="" id="discount" placeholder="discount">
            </div>
            <p style="text-align: center ; width: 100%; margin: 4px 0;" id="total"></p>
            <div class="containerOfcreat">
            <div class="creatdiv">
                <input type="text" id="count" placeholder="count">
                <input type="text" id="category" placeholder="category">
            </div>
                <button id="submit"> <img src="/project/photos/creat.png" alt="noIMGerror" width="20px"> Creat</button>
            </div>
            
        </div>
        <!-- ----- -->
        <div class="outputs">
            <div class="searchBlock">
                <input onkeyup="searchData(this.value)" type="text" id="search" placeholder="search">
                <div class="btnSearch">
                    <button onclick="getSearchMood(this.id)"  id="searchTitle"> <img  width="10px" src="/project/photos/search.png" alt="noIMG"> Search By Title</button>
                    <button onclick="getSearchMood(this.id)"  id="searchTCategory"> <img  width="10px" src="/project/photos/search.png" alt="noIMG"> Search By Category</button>
                </div>
            </div>
        </div>
        <div id="deletAll"></div>
        <table>
            <tr>
                <th>id</th>
                <th>title</th>
                <th>price</th>
                <th>taxes</th>
                <th>discount</th>
                <th>total</th>
                <th>ads</th>
                <th>category</th>
                <th>update</th>
                <th>delet</th>
            </tr>
            <tbody id="tbody">

            </tbody>
        </table>
    </div>
    <footer>
        <p>Proudly made by Mohammed Haimour 😁</p>


    </footer>


    <script src="JSfile.js"></script>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: 'Roboto', sans-serif;
}

body {
    background-color: rgb(215, 215, 215);
    color: rgb(0, 0, 0);
}

.crud {
    width: 80%;
    margin: auto;
}

.head {
    display: flex;
    justify-content: space-between;
    text-align: left;
    text-transform: uppercase;
    margin: 10px 0;
}

.head h2 p {
    position: relative;
    top: -10px;
    display: inline-block;
}

.head .ourTeam {
    margin: 5px 0 0 0;
    background-color: #0d1a22;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 10px;
    text-decoration: none;
    color: white;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.head .ourTeam:hover {
    background-color: #264b62cb;
    color: rgb(199, 199, 199);
    box-shadow: 0px 0px 10px rgb(0, 41, 113);
    text-shadow: 5px 5px 5px rgb(255, 255, 255);
}

input {
    width: 100%;
    height: 30px;
    outline: none;
    border: none;
    background-color: rgb(255, 255, 255);
    margin: 4px 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 4px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
}

input:focus {
    background-color: #000;
    color: white;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.price input {
    width: 23%;
}

#total {
    background-color: rgb(148, 24, 24);
    padding: 6px 3px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    color: white;
}

#total::before {
    content: "total: ";
}

button {
    width: 101%;
    height: 30px;
    border: none;
    cursor: pointer;
    background-color: rgb(65, 88, 208);
    color: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

button:hover {
    background-color: rgb(0, 25, 149);
    letter-spacing: 0.5px;
}
.containerOfcreat{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.creatdiv{
    width: 45%;
}
#submit {
    width: 45%;
    padding: 20px;
    display: block;
    height: 82px;
    font-size: 30px;
    position: relative;
    right: -8px;
}

.btnSearch {
    display: flex;
    justify-content: space-evenly;
}

.btnSearch button {
    width: 45%;
}
#deletAll button{
    margin: 15px 0;
    background-color: rgb(225, 0, 0) ;
    box-shadow: 0 0  5px 5px rgb(255, 21, 21);
    transition: all 1s ;
    -webkit-transition: all 1s ;
    -moz-transition: all 1s ;
    -ms-transition: all 1s ;
    -o-transition: all 1s ;
}
#deletAll button:hover{
    background-color: rgb(143, 0, 0) ;
    box-shadow: 0 0  5px 5px rgb(255, 87, 87);
}

table {
    width: 100%;
    text-align: center;
    margin: 10px 0;
}

table th {
    text-transform: uppercase;
}

th,
td {
    padding: 5px;
}

footer {
    width: 100%;
    margin-top: 40px;
    background-color: #0d1a22;
    padding: 30px 0;
}

footer p {
    color: #346787;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
}

footer p:hover {
    color: #0d1a22;
    text-shadow: 0px 0px 10px whitesmoke;
}

Adnane Kadri · 22 مايو 2022

أظن أن موازنة هاته العناصر بغرض التخلص من هاته الفراغات السلبية لن يكفيه ضبط عرض العناصر والمدخلات لملائمتها وفقط، فقد لا يلائم عرض ما شاشة عرض أخرى.

ولتجاوز هاته المشكلة أقترح استعمال نظام تقطيع شبكي grid system أو الصندوق المرن flex box.كما أنك تقوم في كثير من الحالات بتحديد عرض للعناصر والمدخلات بدل جعلها نسبية أو ضبطها وفق حاوياتها. مثال:

.price input {
    width: 23%;
}

بدل هذا، يمكنك وضع كل اربع عناصر مثلا ضمن حاوية مرنة والتأكد من اعطاءها الفراغات اللازمة gap.

Wael Aljamal · 22 مايو 2022

يمكنك تطبيق عرض للعناصر من خلال معادلة حسابية، مثلا كل عنصر يأخذ ربع العرض مطروحاً منه بعض البكسلات والتي هي مساحات جانبية له، حاولت تطبيق التنسيق التالي وقد نجح بشكل جيد

استخدام حاوية flex
وتوزيع المساحة بين العناصر
ولكل عنصر ربع المساحة إلا 3 بكسل

inputs .price {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.price input {
  width: calc(100% * (1/4) + -3px);
  box-sizing: border-box;
}

كما يمكن زيادة عرض الحاوية قليلاً فتتمدد العناصر داخلها

.price{
  display: flex;
  width: 101%;
  justify-content: space-between;
}

كيفية جعل العناصر تملأ الحاوية الخاصة بهم وتوزيع المساحة بشكل متناسب CSS

السؤال

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية