如何在使用屏幕时包装 div 字段并保持相等@media宽度

任何人都知道如何使用屏幕包装div@media并在所有div上保持相等的宽度。我尝试使用浮点数和内联块，但找不到一种方法来保持所有字段宽度均等合理。使用表格单元格提供了保持相等字段宽度的方法，但不允许在屏幕上更改行/单元格@media但不允许。我提供了一个使用表格单元格的示例，只是为了展示我想要实现的目标。注意：我也试图避免固定的字段宽度。

示例：https://jsfiddle.net/6jj6qx8a/

<html>
<style type="text/css">
.celln {
 display:table-cell;
 padding-right:10px;
 background:#dddddd;
}
.cellv {
 display:table-cell;
 padding-right:10px;
 background:#00ff00;
}
@media screen and ( max-width: 400px ) {
}
</style>
From this...<br><br>
<div style="display:table;">
 <div style="display:table-row;">
  <div class="celln">Name:</div>
  <div class="cellv">John Johnson</div>
  <div class="celln">Employer:</div>
  <div class="cellv">ABC Company</div>
 </div>
 <div style="display:table-row;">
  <div class="celln">Address:</div>
  <div class="cellv">123 State St NW</div>
  <div class="celln">Zip Code:</div>
  <div class="cellv">12345</div>
 </div>
</div>
<br><br>to this on @media screen and ( max-width: 400px ) <br><br>
<div style="display:table;">
 <div style="display:table-row;">
  <div class="celln">Name:</div>
  <div class="cellv">John Johnson</div>
 </div>
 <div style="display:table-row;">
  <div class="celln">Employer:</div>
  <div class="cellv">ABC Company</div>
 </div>
 <div style="display:table-row;">
  <div class="celln">Address:</div>
  <div class="cellv">123 State St NW</div>
 </div>
 <div style="display:table-row;">
  <div class="celln">Zip Code:</div>
  <div class="cellv">12345</div>
 </div>
</div>
</html>

使用包含两个表的div。

将表格宽度设置为 100%，并将父div 设置为 %。

相关内容

最新更新

热门标签：