代码之家  ›  专栏  ›  技术社区  ›  mpen

四列响应定义列表?

responsive-design css html
  •  1
  • mpen  · 技术社区  · 7 年前

    我正在尝试重新创建使用表创建的布局,但使用 <dl> 而是:

    enter image description here

    结果那张桌子在手机上看起来不太好。所以我想做的是,当“公司”不能再放在两列中时,在“名称”下弹出“公司”。

    我希望每一半都是容器的一半 <dt> 可以固定到,比如说,125px。的宽度 <dd> 由于具有可变内容而未知。

    以下是我得到的: 

    dl {
  display: flex;
  flex-wrap: wrap;
}

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

dd {
  margin-right: 10px;
  flex: 1;
}
    <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>

    我知道,它看起来一团糟。我只是不知道如何做到这一点,同时使其响应。

    N、 B.我没有坚持使用 <dl> . 我不在乎语义,只在乎漂亮:-)

    我无法让它像我想要的那样从左向右流动,但这至少可以很好地展示内容: 

    .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;
}
    <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>
    3 回复  |  直到 7 年前
        1
  •  2
  •   tao    7 年前

    在第二个代码片段中,使用flex分发它们 “很好” .

    我准备好了 flex-basis 到 33% 和 flex-grow 到 0 让他们保持连续三人。使用媒体查询,我在下面的一行中将它们设置为2 1000px 下面每行1个 750px . 更改断点以满足您的需要。

    如果你需要更多的帮助,可以考虑在问题中重复你的案例。 

    .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>
        2
  •  1
  •   Johannes    7 年前

    我会用 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>
        3
  •  0
  •   D4rkw0lv3s    7 年前 

    dl {
  display: block;
}

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

dd {
  float: none;
  margin-left: 25%;
}
    <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>

    是这样的吗?

    推荐文章
    vito  ·  为什么在启用触摸模式时忽略媒体查询?
    2 年前
    mike3996  ·  我可以在前一个元素旁边浮动一个元素吗?
    6 年前
    Aaron  ·  HTML CSS增加背景图像的大小,使其随文本增长
    6 年前
    Vítek Peterka  ·  在一个网站上使用href=“#关于我们”进行导航在较小的设备上不起作用
    6 年前
    Ravi21  ·  FF和IE中的元素变形
    6 年前
    user7907740  ·  如何使填充响应
    6 年前
    Nathan Perigreth  ·  如何用javascript或css粗略确定设备的物理大小?
    6 年前
    user7127000  ·  每个响应输入的程序都有一个带有无限循环的主线程,这准确吗?
    6 年前
    LED Fantom  ·  .在Bootstrap网站上未找到img responsive
    6 年前
    Khepf  ·  将Reactstrap carousel图像配置为响应的最佳方法
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号