Pastki divni tepaning old tomoniga ko'chirish

Div-profile-variantlarini ko'chirish bilan yordamga muhtojman. Mana sizga rasmni ko'rsatishim uchun nima qilishni nazarda tutayotganimni ko'rsatib turibman.

Noyferrer"> Tasvir

index.html

<div id="page">
    <div id="content">
        <div id="info">
            <div id="profile" name="picture">
                
                
            </div>
            <div id="menu" name="profile-name">
                Random Guy
            </div>
            <div id="menu" name="profile-options">
                Hi
            </div>
            <div id="personal">
                
  • Email: [email protected]
  • Password: *****************************
  • Country: Bosnia & Herzegovina
  • City: not choosen
  • Address: not choosen
  • Phone number: not choosen
            </div>
        </div>
    </div>
</div>

style.css

#page #content #info #profile[name="picture"]
{
    width:700px;
}

#page #content #info #profile[name="picture"] img[name="profile"]
{
    width:128px;
    height:128px;
}

#page #content #info #profile[name="picture"] img[name="frontpage"]
{
    width:572px;
    height:128px;
    margin-left:-4px;
}

#page #content #info #personal
{
    width:698px;
}

#page #content #info #menu[name="profile-name"]
{
    background-color:#d8d8d8;
    width:116px;
    height:48px;
    max-width:116px;
    max-height:48px;
    border:0px;
    padding:6px;
    word-wrap:break-word;
    margin-top:-5px;
}

#page #content #info #menu[name="profile-options"]
{
    background-color:#d8d8d8;
    width:572px;
    height:48px;
    border:0px;
    margin-top:-5px;
}

Qanday qilib uni biron bir pozitsiya buyrug'i yoki marjdan foydalanmasdan olishim mumkin, chapga harakat qildim: 0px va yuqori: 0px lekin ishlamadi.

2

6 javoblar

Float chap xususiyatini qo'shishga harakat qilib ko'ring:

#page #content #info #menu[name="profile-name"]
{
    background-color:#d8d8d8;
    width:116px;
    height:48px;
    max-width:116px;
    max-height:48px;
    border:0px;
    padding:6px;
    word-wrap:break-word;
    margin-top:-5px;
    float: left;
}
1
qo'shib qo'ydi
#menu {
  display: inline-block;
}

https://jsfiddle.net/zkmuxayq/

0
qo'shib qo'ydi
Tashakkur, siz mening vaqtimni saqlab qoldingiz!
qo'shib qo'ydi muallif Soricy Infinitive, manba

Div ning sukut bo'yicha kodi block elementlari bo'lib, ular to'liq kengligi egallaydi,

#menu {
  display: inline-block;
}

div endi inline ko'rinishida, ya'ni elementlarning oqimini buzmaydi, biroq blok elementi sifatida ko'rib chiqiladi.

0
qo'shib qo'ydi

Faqat "float: chap/o'ng" ni ikkalasiga qo'shing va ularning kengligi 100% dan katta bo'lmaganligiga ishonch hosil qiling.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.div {
position:relative;
float:left;
height:50px;
}

.left {
width:20%;
background-color:grey;
}

.right {
width:80%;
background-color:black;
}
<div class="div left"></div>
<div class="div right"></div>
</div> </div>
0
qo'shib qo'ydi

Profil nomi uchun chapdagi float qo'shishingiz kerak. Siz hozirgi elementni tekshirib ko'rsangiz, u ekranning to'liq kengligidan foydalanmoqda.

#page #content #info #menu[name="profile-name"]
        {
            background-color:#d8d8d8;
            width:116px;
            height:48px;
            max-width:116px;
            max-height:48px;
            border:0px;
            padding:6px;
            word-wrap:break-word;
            margin-top:-5px;
            float: left
        }
0
qo'shib qo'ydi

Sizda ba'zi muammolar mavjud. Avvalo, identifikatorlar noyob bo'lishi kerak va sizda 2 ta "menyu" identifikatori mavjud. Istagan narsaga erishish uchun siz "divert: inline-block" ni 2 divs-ga o'rnatishingiz kerak.

0
qo'shib qo'ydi