html - 由于我是 Flexbox 的新手，无法获得我需要的东西-6ren

html - 由于我是 Flexbox 的新手，无法获得我需要的东西

转载作者：太空宇宙更新时间：2023-11-04 07:55:29

我正在尝试使用 Flexbox 实现简单的布局结构。我指的是 Guide to Flexbox和我自己学习。下面是我的代码和我想要实现的目标。

.order-history-items {
  .order-history-table {
    
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      list-style-position: inside;
      list-style-type: square;
    }
    .order-shipped-to,
    .order-items,
    .order-total-price {
      width: 33%;
    }
    .toggle {
      cursor: pointer;
      display: block;
    }
  }
}
.js .order-history-table .hidden {
  display: none;
}




   

    .orderdetails {
      display: flex;
      flex-wrap: wrap;
      
      // margin: 0 1%;

      h1 {
        flex-basis: 100%;
      }

      h2 {
        clear: both;
        flex-basis: 100%;
        text-align: center;
        margin-bottom: 20px;
      }

      .label {
        font-weight: bold;
        margin-bottom: .3rem;
        margin-top: .3rem;
        text-transform: uppercase;
      }
      .order-shipment-table {
        background-color: white;
        border: 1px solid ;
        border-radius: 5px;
        padding: 1em;
      }
      .order-shipment-details {
        .order-shipment-address {
          float: right;
        }
      }
      .line-items {
        clear: both;
        padding-top: 1rem;
        .line-item {
          padding-bottom: 1rem;
          .line-item-details,
          .line-item-quantity,
          .line-item-price {
            display: inline-block;
            vertical-align: top;
          }
          .line-item-quantity,
          .line-item-price {
            width: 14%;
          }
          .line-item-details {
            width: 70%;
            a {
              font-size: 1.1rem;
            }
          }
          .line-item-quantity {
            text-align: center;
          }
          .line-item-price {
            text-align: right;
          }
        }
      }
        flex-basis: 25%;
        .order-payment-summary {
        @media screen and (min-width: 480px) {
          float: right;
        }
        .label {
          font-weight: 800;
          font-size: 15px;
          margin-bottom: 12px;
        }
        .order-detail-summary {
          .order-key {
            text-transform: uppercase;
            color: #000;
            letter-spacing: 0;
            font-size: 12px;
          }
          .order-value.number--smallest {
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 0px;
            color: #000;
          }
          .order-value.number--large {
            color: #000;
            letter-spacing: 0;
          }
        }
      }
      .order-information {
        flex-basis: 100%;
        margin-bottom: 30px;
        // padding-bottom: .5em;
        // padding-top: .5em;
        .order-status {
          span {
            color: #000;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: uppercase;
            font-size: smaller;
          }
        }
        .order-date {
          span {
            color: #000;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: uppercase;
            font-size: smaller;
          }
        }
        .label {
          color: white;
          font-weight: 300;
          text-transform: none;
        }
        .value {
          font-weight: 700;
        }
        .order-number {
          font-size: 1.75rem;
        }
      }
      .payment-amount {
        .label {
          font-weight: normal;
          text-transform: none;
        }
      }
      .order-totals-table td {
        &:first-child {
          padding-right: 5rem;
          text-align: left;
        }
      }
      .order-payment-instruments,
      .order-billing,
      .order-shipment-address
      {
        flex-basis: 25%;
        .label {
          font-weight: 800;
          font-size: 15px;
        }
      }
      .order-payment-instruments{
        padding-left: 84px;
      }
      .order-billing {
        padding-left: 100px;
      }
      .order-shipment-address
      {
          padding-left: 120px;
      }
      .order-shipments {
        h2 {
          display: flex;
        }
      }
    }

<div class="orderdetails">
  <h1>My Order</h1>
  <h2 class="order-number">
    <span class="label">Order :</span>
    <span class="value">STG00004302</span>
  </h2>
  <div class="order-information">
    <div class="order-status">
      <span class="label">Order Status:</span>
      <span class="value clearfix">Complete</span>
    </div>
    <div class="order-date">
      <span class="label">Order Placed:</span>
      <span class="value">10/27/2017 11:02:15 AM</span>
    </div>
  </div>
  <div class="order-payment-summary">
    <div class="label">Payment Total</div>
    <div class="order-detail-summary">
      <div class="order-totals-table">
        <div class="order-subtotal order-row">
          <div class="order-key">Subtotal</div>
          <div class="order-value number--smallest">C$ 21.33</div>
        </div>
        <div class="order-shipping order-row">
          <div class="order-key">
            Shipping
          </div>
          <div class="order-value number--smallest">
            C$ 0.00
          </div>
        </div>
        <div class="order-sales-tax order-row">
          <div class="order-key">Taxes</div>
          <div class="order-value number--smallest">
            C$ 2.77
          </div>
        </div>
        <div class="order-total order-row">
          <div class="order-key">Order Total:</div>
          <div class="order-value number--large">C$ 24.10</div>
        </div>
      </div>
    </div>
  </div>
  <div class="order-payment-instruments">
    <div class="label">
      Payment Method
    </div>
    <div class="payment-type">PayPal</div>
    <div class="payment-amount">
      <span class="label">Amount:</span>
      <span class="value">C$ 24.10</span>
    </div>
    <!-- END: payment-amount -->
  </div>
  <div class="order-billing">
    <div class="label">Billing Address</div>
    <div class="mini-address-name">
      Dhon Rocafort
    </div>
    <div class="mini-address-location">
      <address>
        1120 N St
        <br>Sacramento,
        CA
        95814-5680<br>
        United States
        <br>
        2122121423
      </address>
    </div>
  </div>
  <div class="order-shipment-address">
    <div class="label">Shipping To</div>
    <div class="mini-address-name">
      DihonsKi Rocafort
    </div>
    <div class="mini-address-location">
      <address>
        Air Canada Centre
        <br>40 Bay St
        <br>Toronto,
        ON
        M5J 2X2<br>
        Canada
        <br>
        2122121423
      </address>
    </div>
    <div class="shipping-method">
      <div class="label">Method:</div>
      <div class="value">StandardCA</div>
    </div>
  </div>
</div>

它应该看起来像 this在桌面 View 中:

我关心图像末尾的主要 4 列，它也应该是响应式的。我没有移动 View 的任何细节，但是这 4 列在移动 View 中应该是 2*2。

最佳答案

注意:在整页中打开代码段。

现在，首先请尝试添加尽可能少的代码，因为浏览这么长的 HTML 太难了，您可以删除多余的标记和标签，因为您只需要知道如何使用 flex 对齐。

我刚刚调整了对齐方式以匹配您发布的屏幕截图。我将所有 CSS 属性添加为内联样式，并在相应标签上使用 style 属性。

关于 Flexboxes 你需要的一切都在这里 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ .尝试一下，您会很容易掌握它的窍门。

提示将您的网页分解成组件并将它们包装在 divs 中。使用此设置可以更容易地控制对齐方式，尤其是 flexboxes。

html, body {
  height: 100%;
}
.order-history-items {
  .order-history-table {
    
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      list-style-position: inside;
      list-style-type: square;
    }
    .order-shipped-to,
    .order-items,
    .order-total-price {
      width: 33%;
    }
    .toggle {
      cursor: pointer;
      display: block;
    }
  }
}
.js .order-history-table .hidden {
  display: none;
}




   

    .orderdetails {
      display: flex;
      
      flex-wrap: wrap;
      
      // margin: 0 1%;

      h1 {
        flex-basis: 100%;
      }

      h2 {
        clear: both;
        flex-basis: 100%;
        text-align: center;
        margin-bottom: 20px;
      }

      .label {
        font-weight: bold;
        margin-bottom: .3rem;
        margin-top: .3rem;
        text-transform: uppercase;
      }
      .order-shipment-table {
        background-color: white;
        border: 1px solid ;
        border-radius: 5px;
        padding: 1em;
      }
      .order-shipment-details {
        .order-shipment-address {
          float: right;
        }
      }
      .line-items {
        clear: both;
        padding-top: 1rem;
        .line-item {
          padding-bottom: 1rem;
          .line-item-details,
          .line-item-quantity,
          .line-item-price {
            display: inline-block;
            vertical-align: top;
          }
          .line-item-quantity,
          .line-item-price {
            width: 14%;
          }
          .line-item-details {
            width: 70%;
            a {
              font-size: 1.1rem;
            }
          }
          .line-item-quantity {
            text-align: center;
          }
          .line-item-price {
            text-align: right;
          }
        }
      }
        flex-basis: 25%;
        .order-payment-summary {
        @media screen and (min-width: 480px) {
          float: right;
        }
        .label {
          font-weight: 800;
          font-size: 15px;
          margin-bottom: 12px;
        }
        .order-detail-summary {
          .order-key {
            text-transform: uppercase;
            color: #000;
            letter-spacing: 0;
            font-size: 12px;
          }
          .order-value.number--smallest {
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 0px;
            color: #000;
          }
          .order-value.number--large {
            color: #000;
            letter-spacing: 0;
          }
        }
      }
      .order-information {
        flex-basis: 100%;
        margin-bottom: 30px;
        // padding-bottom: .5em;
        // padding-top: .5em;
        .order-status {
          span {
            color: #000;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: uppercase;
            font-size: smaller;
          }
        }
        .order-date {
          span {
            color: #000;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: uppercase;
            font-size: smaller;
          }
        }
        .label {
          color: white;
          font-weight: 300;
          text-transform: none;
        }
        .value {
          font-weight: 700;
        }
        .order-number {
          font-size: 1.75rem;
        }
      }
      .payment-amount {
        .label {
          font-weight: normal;
          text-transform: none;
        }
      }
      .order-totals-table td {
        &:first-child {
          padding-right: 5rem;
          text-align: left;
        }
      }
      .order-payment-instruments,
      .order-billing,
      .order-shipment-address
      {
        flex-basis: 25%;
        .label {
          font-weight: 800;
          font-size: 15px;
        }
      }
      .order-payment-instruments{
        padding-left: 84px;
      }
      .order-billing {
        padding-left: 100px;
      }
      .order-shipment-address
      {
          padding-left: 120px;
      }
      .order-shipments {
        h2 {
          display: flex;
        }
      }
    }

<div class="orderdetails" style="display: flex; flex-direction: column; height: 50%">
  <h1 style="margin: auto;">My Order</h1>
  <h2 class="order-number" style="margin: auto;">
    <span class="label">Order :</span>
    <span class="value">STG00004302</span>
  </h2>
  <div class="order-information" style="margin: 10px;">
    <div class="order-status">
      <span class="label">Order Status:</span>
      <span class="value clearfix">Complete</span>
    </div>
    <div class="order-date">
      <span class="label">Order Placed:</span>
      <span class="value">10/27/2017 11:02:15 AM</span>
    </div>
  </div>
  <div style="display: flex; flex-direction: row; justify-content: space-around;">
    <div class="order-payment-summary">
      <div class="label">Payment Total</div>
      <div class="order-detail-summary">
        <div class="order-totals-table">
          <div class="order-subtotal order-row">
            <div class="order-key">Subtotal</div>
            <div class="order-value number--smallest">C$ 21.33</div>
          </div>
          <div class="order-shipping order-row">
            <div class="order-key">
              Shipping
            </div>
            <div class="order-value number--smallest">
              C$ 0.00
            </div>
          </div>
          <div class="order-sales-tax order-row">
            <div class="order-key">Taxes</div>
            <div class="order-value number--smallest">
              C$ 2.77
            </div>
          </div>
          <div class="order-total order-row">
            <div class="order-key">Order Total:</div>
            <div class="order-value number--large">C$ 24.10</div>
          </div>
        </div>
      </div>
    </div>
    <div class="order-payment-instruments">
      <div class="label">
        Payment Method
      </div>
      <div class="payment-type">PayPal</div>
      <div class="payment-amount">
        <span class="label">Amount:</span>
        <span class="value">C$ 24.10</span>
      </div>
      <!-- END: payment-amount -->
    </div>
    <div class="order-billing">
      <div class="label">Billing Address</div>
      <div class="mini-address-name">
        Dhon Rocafort
      </div>
      <div class="mini-address-location">
        <address>
          1120 N St
          <br>Sacramento,
          CA
          95814-5680<br>
          United States
          <br>
          2122121423
        </address>
      </div>
    </div>
    <div class="order-shipment-address">
      <div class="label">Shipping To</div>
      <div class="mini-address-name">
        DihonsKi Rocafort
      </div>
      <div class="mini-address-location">
        <address>
          Air Canada Centre
          <br>40 Bay St
          <br>Toronto,
          ON
          M5J 2X2<br>
          Canada
          <br>
          2122121423
        </address>
      </div>
      <div class="shipping-method">
        <div class="label">Method:</div>
        <div class="value">StandardCA</div>
      </div>
    </div>
   </div>
</div>

关于html - 由于我是 Flexbox 的新手，无法获得我需要的东西，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47374095/

文章推荐： javascript - Bootstrap、jQuery、Popper 和 CSS 加载顺序

文章推荐： java - Spring 3.2资源文件加载问题

文章推荐： html - 砌体效应 - 如何改变方 block 的顺序？

javascript - IsPlainObject，东西？
这个fn是吗: function isplainobj ( obj ) { return Object.prototype.toString.call( obj ) === "[object
Linux bash 东西
我尝试创建一个我没有经验的小 bash 脚本。我尝试做类似的事情: #!/bin/bash statut="na" if [ $proc = 0 ]; then statut = "close
ruby 替代类 << 东西
我想重写 HighLine 的几个方法来自定义我的控制台，目前我的代码如下所示: cmd = ask("#{@prompt_label} #{@prompt_separator} ",
jQuery :has(. 东西 :contains()) unsupported?
鉴于下面的 HTML，我尝试使用 jQuery 来匹配所有具有类“foo”的跨度的列表项，并且该跨度应包含文本“relevant”。 Some text relevant Some more
docker - 移动所有 Docker 东西？
我拥有一个 5 美元 20GB SSD Digital Ocean Droplet，它几乎用完了 Docker 镜像和容器的空间。有没有办法购买一个卷，将其连接到服务器并安全地将所有 Docker
javascript - 我怎样才能仅根据标题行应用一些 jquery 东西
我有这样的表: id name number result stuff stuff stuff stuff 我只想将 class = "red" 添加到
mysql - 两点之间的距离。东西+南北
我需要计算两点之间的距离，但不是以常规方式。我需要知道“东西距离”+“南北距离”。我想这比常规的“乌鸦飞翔”计算更简单，但我仍然不知道如何做到这一点。我想使用 MySQL 查询来执行此操作，并且最好
c - 需要帮助理解指针和其他各种 C 东西
#include #include #include typedef struct dict_pair { void *key; void *value; struct dict_p
c# - WriteLine char[ ] + 东西
为什么当我尝试通过将 char[] word 写入控制台时会发生这种奇怪的事情 Console.WriteLine(word); 我得到了一个正确的结果，但是当我写的时候 Console.Write
java - 如何在使用反射创建的对象上注入(inject)东西？
一个简单的例子: class C{} class B{ @Inject C c; void doSomething(){ System.out.println(c);
C# - MyClass.MyProperty[东西]
我想做某事，但不确定如何描述它。我有这门课 public class Company { private List _persons; private Person GetPersonByNa
c++ - QDebug() << 东西;自动添加换行符？
我正在尝试实现我自己的 qDebug()样式调试输出流，这基本上是我目前所拥有的: struct debug { #if defined(DEBUG) template std::os
ios - sqlite selectObject 方法，%%%@%% 东西
所以我正在为我的应用程序编写一个搜索功能，代码如下: - (void) selectObject: (NSString *)notes{ [axKnotes removeAllObjects]
pattern-matching - 匹配复杂的继承-y 东西
我想在 Rust 中匹配一种复杂的继承式东西: struct Entity { pub kind: EntityKind, } pub enum EntityKind { Player
sql - 基本的 SQL 东西……左连接
我是 SQL 新手。这没有返回任何结果...... SELECT media.id as mediaid, media.title as mediatitle, media.description
android - Raspberry 不启动 android 东西
在微型 SDCard 上写入 Android things 图像并将该卡插入 Raspberry Pi 3 Model B 并打开电源，启动时显示“Auto config Please wait”然后
css - 标题标签中的文本自动移动到框的右侧，没有任何 css 东西
这是一个常见的但是文本出现在框的右侧，不是极右但几乎是这样 h3: ................................................ .................
c - 获取密码的隐窝是添加一些奇怪的 foobar 东西，所以它不等于
#include #include #include #include #include int main(int argc, string argv[]) { if(argc >
CSS 堆叠不起作用。 z-index 东西
所以我试图让一些东西相互堆叠。首先，查看工作链接会有所帮助，您会看到问题所在: http://brownbox.net.au/clients/matchlessphotography/ 现在我需要使用
html - 不适用于谷歌浏览器
我想在禁用 javascript 时在我的网站顶部显示一条消息(就像在 SO 上一样)，但在谷歌浏览器上不起作用最佳答案看起来是这样。您可以使用 javascript 隐藏“noscript”消

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 由于我是 Flexbox 的新手，无法获得我需要的东西