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

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

css

Css 如何在使用@media screen时包装div字段并保持相等宽度,css,Css,任何人都知道如何使用@media screen包装div，并在所有div上保持相同的宽度。我尝试过使用float和inline块，但找不到一种方法来保持所有字段宽度都相等。使用表格单元格可以保持相同的字段宽度，但不允许在@media screen上更改行/单元格。我提供了一个使用表格单元格的示例，以展示我试图实现的目标。注意：我还试图避免固定的字段宽度例如：塞伦先生{ 显示：表格单元格；右边填充：10px；背景：#dddddd； } 塞尔夫先生{ 显示：表格单元格；右边填充：10px

任何人都知道如何使用@media screen包装div，并在所有div上保持相同的宽度。我尝试过使用float和inline块，但找不到一种方法来保持所有字段宽度都相等。使用表格单元格可以保持相同的字段宽度，但不允许在@media screen上更改行/单元格。我提供了一个使用表格单元格的示例，以展示我试图实现的目标。注意：我还试图避免固定的字段宽度

例如：


塞伦先生{
显示：表格单元格；
右边填充：10px；
背景：#dddddd；
}
塞尔夫先生{
显示：表格单元格；
右边填充：10px；
背景：#00ff00；
}
@媒体屏幕和屏幕（最大宽度：400px）{
}
从此…


姓名：
约翰·约翰逊
雇主：
ABC公司
地址:
西北州街123号
邮政编码：
12345


在@媒体屏幕和（最大宽度：400px）


姓名：
约翰·约翰逊
雇主：
ABC公司
地址:
西北州街123号
邮政编码：
12345

使用包含两个表的div

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

使用%将使我的宽度固定在该%上，而不是使用内容来计算整个表格所需的总最小宽度。您是否尝试使用flexbox？

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