我试图通过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：
我关心图像末尾的主要4列，它也应该是响应式的。我没有移动视图的任何细节，但在移动视图中这4列应为2 * 2。
答案 0 :(得分：1)
注意：在完整页面中打开本机。
现在，首先请尝试添加尽可能少的代码，因为它太难以通过这个长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>
答案 1 :(得分：0)
代码混乱，但我使用Flexbox作为您的付款总额，position:absolute使用class="order-value"和right:10px