根据图像对齐元素

-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

根据图像对齐元素

回答

相关问题