Question

有人可以帮助我举例说明如何完成以下布局吗？桌子最适合这个吗？

https://gyazo.com/80a2f66d280c480c1e6e70637959b271

我不想对元素的宽度进行硬编码，因为我需要它才能响应，这就是为什么我会遇到困难......

所以基本上我需要它居中但不以文本对齐为中心。感谢我能得到的所有帮助。

Answer 1

为什么要表？你可以用百分比来设置div宽度，不是吗？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

不要使用表格，因此很难为移动设备优化网站。这就是我要做的事情：

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>
    john@doe.com
    <button class="right">Edit</button>
  </div>
</div>

Answer 3

看一下响应表：

.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>

Answer 4

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

可以更改宽度以反映所需的图像大小，但这会使图像基于父元素的大小居中，方法是左右均分两个边距。

根据图像对齐元素

4 个答案: