CSS安排彼此相鄰

兩個div我有以下HTML：CSS安排彼此相鄰

<div className={`page-header-profile-photo-container`}> 
    <div className="user-picture"> 
    </div> 
    <div className="user-name"> 
     <p>Sample GmbhH</p> 
    </div> 
</div>

而且我的CSS：

.page-header-profile-photo-container{ 
    position: absolute; 
    top: 10%; 
    right: 130px; 
    width: 200px; 

    } 
    .user-picture { 
    position: relative; 
    top: 10%; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background-color: #787567; 
    } 
    .user-name{ 
    position: absolute; 
    top: 5%; 

    }

這使得像以下：

我想在圓形div和文本之間留有一些空間。 page-header-profile-photo-container的位置必須是絕對的。

我該如何解決這個問題？

來源

2017-05-21 Nitish

您是否嘗試過使用'顯示：內聯block'您'.user_name class'？ –

首先更正您的語法，如className至class並嘗試以下代碼。無需position:absolute在user-name類

.page-header-profile-photo-container{ 
 
    width: 200px; 
 
    position: absolute; 
 
    top: 10%; 
 
    right: 130px; 
 

 
    } 
 
    .user-picture { 
 
    position: relative; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    background-color: #787567; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    } 
 
    .user-name{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    }

<div class=page-header-profile-photo-container> 
 
    <div class="user-picture"> 
 
    </div> 
 
    <div class="user-name"> 
 
     <p>Sample GmbhH</p> 
 
    </div> 
 
</div>

來源

2017-05-21 09:13:56 Bhuwan

className因爲實際上我正在使用React！ – Nitish

謝謝！我用這個解決方案。 – Nitish

不要在用戶名中使用絕對定位。絕對定位將物品置於特定位置（不管它是否重疊）

來源

2017-05-21 09:12:50 ferit

使用flex-box它會工作爲我好。希望這個幫助。

.page-header-profile-photo-container{ 
 
    background-color: #f5f5f5; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    position: absolute; 
 
    height: 50px; 
 
    top: 10%; 
 
    right: 130px; 
 
    padding: 5px 10px; 
 
    width: 200px; 
 

 
    } 
 
    .user-picture { 
 
    position: relative; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    /*background-color: #787567;*/ 
 
    } 
 
    .user-picture img{ 
 
    border-radius: 50%; 
 
    display: block; 
 
    height: auto; 
 
    max-width: 100%; 
 
    } 
 
    .user-name{ 
 
    font-size: 15px; 
 
    }

<div class=page-header-profile-photo-container> 
 
    <div class="user-picture"> 
 
     <img src="http://placehold.it/40x40" alt="Profile Picture" /> 
 
    </div> 
 
    <div class="user-name"> 
 
     <p>Sample GmbhH</p> 
 
    </div> 
 
</div>

來源

2017-05-21 09:20:18 Rahul

CSS安排彼此相鄰

回答

相關問題