根據圖像對齊元素

-1

有人可以幫助我一個例子如何完成以下佈局？桌子最適合這個嗎？根據圖像對齊元素

https://gyazo.com/80a2f66d280c480c1e6e70637959b271

我不想硬編碼元素的寬度，因爲我需要它來響應藏漢，這就是爲什麼我有一個很難..

所以basicly我需要它，但中心不以文本對齊爲中心。感謝我能得到的所有幫助。

來源

2016-10-18 Codehiker

你可以分享你到目前爲止的代碼？ – DouglasCamargo

您應該發佈代碼。你到目前爲止嘗試了什麼？ – Daniel

道格拉斯卡馬戈說什麼。此外，桌子永遠不是最好的佈局，除非你處理的是表格中最好的數據，例如汽車規格，員工姓名...... –

不要使用表格，這使得它很難優化網站的移動設備。這是我會做：

body { 
 
    font-family: Arial, sans-serif; 
 
    color: #444444; 
 
} 
 

 
.info { 
 
    border: 1px solid #bbbbbb; 
 
    border-width: 1px 0; 
 
    padding: 10px; 
 
} 
 

 
.row { 
 
    line-height: 30px; 
 
    padding: 10px; 
 
} 
 

 
.label { 
 
    display: inline-block; 
 
    width: 30%; /* You may want to adjust this property */ 
 
    margin: 0 10px; 
 
    text-align: right; 
 
    font-size: 95%; 
 
    color: #888888; 
 
} 
 

 
button { 
 
    border: none; 
 
    background-color: #43CEAD; 
 
    border-radius: 3px; 
 
    padding: 4px 10px; 
 
    color: white; 
 
    font-size: 90%; 
 
} 
 

 
.right { 
 
    float: right; 
 
}

<div class="info"> 
 
    <div class="row"> 
 
    <span class="label">Name:</span> 
 
    John Doe 
 
    <button class="right">Edit</button> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <span class="label">Password:</span> 
 
    ******** 
 
    <button class="right">Edit</button> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <span class="label">Animus Heart ID:</span> 
 
    B0 23459332 
 
    <button class="right">Edit</button> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <span class="label">E-mail:</span> 
 
    [email protected] 
 
    <button class="right">Edit</button> 
 
    </div> 
 
</div>

來源

2016-10-18 20:55:02 Aloso

看一看響應表：

.table { 
 
    display: table; 
 
} 
 
.table > .row { 
 
    display: table-row; 
 
} 
 
.table > .row > .cell { 
 
    display: table-cell; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     First 
 
    </div> 
 
    <div class="cell"> 
 
     Second 
 
    </div> 
 
    <div class="cell"> 
 
     Third 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-10-18 20:37:08

#img { 
    width: 100%; 
    margin: 0 auto; 
}

寬度可以改變，以反映圖像的所需尺寸，但這將根據家長中心圖像元素的大小通過左右平分兩個邊界。

來源

2016-10-18 20:37:11 Tokiin

爲什麼表？你可以設置百分比的div寬度，不是嗎？

.col--first { 
 
    width: 40%; 
 
    float: left; 
 
    text-align: right; 
 
} 
 
.col--second { 
 
    margin-left: 1%; 
 
    width: 59%; 
 
    float: left; 
 
} 
 
.col--second:after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.right { 
 
    float: right; 
 
}

<div> 
 
    <div class="col--first">Name:</div> 
 
    <div class="col--second">John 
 
    <button class="right">Edit</button> 
 
    </div> 
 
    <div class="col--first">Password:</div> 
 
    <div class="col--second">****** 
 
    <button class="right">Edit</button> 
 
    </div> 
 
</div>

來源

2016-10-18 20:51:40 fremail

根據圖像對齊元素

回答

相關問題