四列响应定义列表？

时间：2018-01-05 21:39:07

标签： html css css3 responsive-design

我尝试使用表格重新创建此布局，但改为使用<dl>：

enter image description here

事实证明，该表在移动设备上看起来并不那么好。所以我想要做的就是拥有＆＃34;公司＆＃34;弹出＆＃34;姓名＆＃34;当它不再适合两列时。

我希望每一半都是容器的50％，<dt>可以固定为125px。由于内容可变，<dd>的宽度未知。

以下是我所拥有的：

＆＃13;
＆＃13; 
dl {
  display: flex;
  flex-wrap: wrap;
}

dt {
  width: 125px;
  font-weight: bold;
}

dd {
  margin-right: 10px;
  flex: 1;
}
＆＃13; 
<dl class="customer-details-list">
  <dt><i class="mrkn misc-user"></i> Name</dt>
  <dd>Shawn K. South</dd>

  <dt><i class="mrkn misc-hotel"></i> Company</dt>
  <dd>Shinyglowd Co.</dd>

  <dt><i class="mrkn misc-phone"></i> Home</dt>
  <dd>574-202-5192</dd>

  <dt><i class="mrkn misc-phone"></i> Cell</dt>
  <dd>615-761-0744</dd>

  <dt><i class="mrkn misc-envelope"></i> Email</dt>
  <dd>ShawnKSouth@jourrapide.com</dd>

  <dt><i class="mrkn misc-map-marker"></i> Mailing Address</dt>
  <dd>1228 Hidden Pond Road<br> Nashville, TN &nbsp;37214</dd>
</dl>
＆＃13;
＆＃13;
＆＃13;

我知道它看起来完全搞砸了。我只是不确定如何做到这一点，同时使其响应。

N.B。我没有坚持使用<dl>。我不关心语义，只是喜欢： - ）

我不能让它像我想的那样从左到右流动，但这至少可以很好地展示出内容：

＆＃13;
＆＃13; 
.customer-details-table {
  column-width: 300px;
  column-gap: 10px;
}

.customer-details-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2px;
}

.customer-details-header {
  font-weight: bold;
  width: 130px;
}

.customer-details-body {
  flex: 1;
}
＆＃13; 
<div class="section-content">

  <div class="customer-details-table">
    <div class="customer-details-item">
      <div class="customer-details-header"><i class="mrkn misc-user"></i> Name</div>
      <div class="customer-details-body">Mr XXXXX</div>
    </div>

    <div class="customer-details-item">
      <div class="customer-details-header"><i class="mrkn misc-hotel"></i> Company</div>
      <div class="customer-details-body">Foo234</div>
    </div>

    <div class="customer-details-item">
      <div class="customer-details-header">
        <i class="mrkn misc-phone"></i> Cellular
      </div>
      <div class="customer-details-body">250-661-8888</div>
    </div>

    <div class="customer-details-item">
      <div class="customer-details-header">
        <i class="mrkn misc-phone"></i> Home
      </div>
      <div class="customer-details-body">--</div>
    </div>


    <div class="customer-details-item">
      <div class="customer-details-header"><i class="mrkn misc-envelope"></i> Email</div>
      <div class="customer-details-body">mark+cust1075@example.ca</div>
    </div>

    <div class="customer-details-item">
      <div class="customer-details-header"><i class="mrkn misc-map-marker"></i> Mailing Address</div>
      <div class="customer-details-body">--</div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

在你的第二个片段中，使用flex来分发“nicely”。

我已将flex-basis设置为33%而将flex-grow设置为0以使其保持连续3次。使用媒体查询，我将它们设置为1000px下方的行2和750px下方的每行1。更改断点以满足您的需求。

如果您需要更多帮助，请考虑在问题中复制您的案例。

.customer-details-table {
 display: flex;
 flex-wrap: wrap;
}

.customer-details-item {
  flex: 1 0 33%;
  display: flex;
  align-items: flex-start;
  margin-bottom: 2px;
}

.customer-details-header {
  font-weight: bold;
  width: 130px;
}

.customer-details-body {
  flex: 1;
}
@media (max-width: 1000px) {
  .customer-details-item {
    flex-basis: 50%;
  } 
}
@media (max-width: 750px) {
  .customer-details-item {
    flex-basis: 100%;
  } 
}
<div class="section-content">

  <div class="customer-details-table">
    <div class="customer-details-item">
      <div class="customer-details-header"><i class="mrkn misc-user"></i> Name</div>
      <div class="customer-details-body">Mr XXXXX</div>
    </div>

    <div class="customer-details-item">
      <div class="customer-details-header"><i class="mrkn misc-hotel"></i> Company</div>
      <div class="customer-details-body">Foo234</div>
    </div>

    <div class="customer-details-item">
      <div class="customer-details-header">
        <i class="mrkn misc-phone"></i> Cellular
      </div>
      <div class="customer-details-body">250-661-8888</div>
    </div>

    <div class="customer-details-item">
      <div class="customer-details-header">
        <i class="mrkn misc-phone"></i> Home
      </div>
      <div class="customer-details-body">--</div>
    </div>


    <div class="customer-details-item">
      <div class="customer-details-header"><i class="mrkn misc-envelope"></i> Email</div>
      <div class="customer-details-body">mark+cust1075@example.ca</div>
    </div>

    <div class="customer-details-item">
      <div class="customer-details-header"><i class="mrkn misc-map-marker"></i> Mailing Address</div>
      <div class="customer-details-body">--</div>
    </div>
  </div>
</div>

答案 1 :(得分：1)

我只会在float: left;和dt元素上使用dl，并使用包含column-count: 2的包装器。没有弹性或其他东西。

要使其具有响应性，请在较小屏幕的媒体查询中将column-count:更改为1。

dl {
  margin-top: 0;
}

dt {
  float: left;
  clear: left;
  width: 50px;
  font-weight: bold;
}

dd {
  float: left;
}

.wrapper {
  column-count: 2;
}
<div class="wrapper">
  <dl class="customer-details-list">
    <dt><i class="mrkn misc-user"></i> Name</dt>
    <dd>Shawn K. South</dd>

    <dt><i class="mrkn misc-hotel"></i> Company</dt>
    <dd>Shinyglowd Co.</dd>

    <dt><i class="mrkn misc-phone"></i> Home</dt>
    <dd>574-202-5192</dd>

    <dt><i class="mrkn misc-phone"></i> Cell</dt>
    <dd>615-761-0744</dd>

    <dt><i class="mrkn misc-envelope"></i> Email</dt>
    <dd>ShawnKSouth@jourrapide.com</dd>

    <dt><i class="mrkn misc-map-marker"></i> Mailing Address</dt>
    <dd>1228 Hidden Pond Road<br> Nashville, TN &nbsp;37214</dd>
  </dl>
</div>

答案 2 :(得分：0)

＆＃13;
＆＃13; 
dl {
  display: block;
}

dt {
  font-weight: bold;
  float: left;
  padding: 0 10px;
}

dd {
  float: none;
  margin-left: 25%;
}
＆＃13; 
<dl class="customer-details-list">
  <dt><i class="mrkn misc-user"></i> Name</dt>
  <dd>Shawn K. South</dd>

  <dt><i class="mrkn misc-hotel"></i> Company</dt>
  <dd>Shinyglowd Co.</dd>

  <dt><i class="mrkn misc-phone"></i> Home</dt>
  <dd>574-202-5192</dd>

  <dt><i class="mrkn misc-phone"></i> Cell</dt>
  <dd>615-761-0744</dd>

  <dt><i class="mrkn misc-envelope"></i> Email</dt>
  <dd>ShawnKSouth@jourrapide.com</dd>

  <dt><i class="mrkn misc-map-marker"></i> Mailing Address</dt>
  <dd>1228 Hidden Pond Road<br> Nashville, TN &nbsp;37214</dd>
</dl>
＆＃13;
＆＃13;
＆＃13;

它是这样的吗？

相关问题
最新问题