色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何建立一個布局復雜的李as卡(包括例子)？

CSS
劉姿婷2年前8瀏覽0評論

我試圖建立一個& quot卡片& quot在一個ul li列表內。這種卡應該是有反應的。因此我的核心想法是使用CSS Flexbox。我已經在codepen.io上開始寫了一支筆，但為了實現它，我已經奮斗了好幾天了。為什么我不能很容易地將這些div與flexbox對齊？

它應該是這樣的:enter image description here

這是鋼筆: https://codepen.io/bogazci/pen/WNayNXb?編輯=1100人

超文本標記語言

<ul class="packs-list">
  <a href="#">
    <li class="pack">
      <div class="pack-sku">B01-102 102<br>ordered on 14th may 23</div>
      <div class="pack-card">
        <h2 class="pack-title">Customer Engagement</h2>
        <div class="pack-description">This is the descriptin for the.</div>
        <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
      </div>
    </li>
  </a>
</ul>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.pack-sku {
  background-color: red;
  white-space: nowrap;
  transform: rotate(-90deg);
} 

.pack-card {
  background-color: brown;
} 

.pack {
  background-color: green;
  width: 100%;
} 

.packs-list {
  background-color: yellow;
} 

ul {
  display: flex;
  list-style-type: none;
  list-style-position: inside;
  margin:0;
  padding:0;
}

li {
  display: flex;
margin:0;
  padding:0;
}

.pack-card {
  display: flex;
}

從語法上來說，ul元素只能包含li元素，而李燦可以包含任何元素。我修改了HTML來反映這一點。

不清楚你使用Flexbox布局的目的是什么，所以我從頭開始重新創建了你的CSS。

CSS是注釋的，所以我不會在這里重復，但是Flexbox布局的技巧是區分不同的列和行父容器，以及哪些子項應該允許/強制增長/收縮或不允許。

作為獎勵，我添加了一些“響應”解決方案和一些你可以擺弄的懸停效果:body { font-size }、@ media and pack:hover/pack:hover & gt；a.

一個你可以用叉子叉的筆...

/* makes padding+border part of total element size */
* { box-sizing: border-box }

:root {
    /* Define a few values for general use */
    --pad: 0.5rem; /* generic padding */
    --bd : 3px;    /* border size */
}

body {
    margin: 0; /* Remove HTML default spacing */

    padding: calc(2 * var(--pad));
    font-size: calc(0.625vmin + 0.75rem); /* Responsive font */

    background-color: #efefef;
}

.list {
    /* Remove HTML defaults */
    list-style-type: none;
    margin: 0; padding: 0;
}

/******************/
/* Flexbox Layout */
/******************/
/* Flexbox parent containers */
.list, .pack>a, .pack-card { display: flex }
.list, .pack>a             { flex-flow: row wrap }
.pack-card                 { flex-flow: column wrap; justify-content: space-between }
.list                      { justify-content: center }

/* Flexbox child items */
.pack-sku, .pack-card,
.pack-description          { flex: 1 } /* allow to stretch to fill parent */

/* Flexbox spacing */
.list                      { gap: calc(2 * var(--pad)) }
.pack>a, .pack-card        { gap: var(--pad) }

/**********************/
/* Sizing and Styling */
/**********************/
/* All classes containing ... */
[class*="pack"] { padding: var(--pad) }

.pack {
/*    max-width: min(24rem, 100%); /* toy with this */

    background-color: White;
    border: var(--bd) solid #aaa;
    color: #444;
}
.pack:hover {
    border-color: Black;
    color: Black;
}

.pack>a {
    text-decoration-style: wavy;
    text-decoration-color: #e8e8e8;
    color: currentColor;
}
.pack:hover>a {
    text-decoration-style: solid;
    text-decoration-color: Black;
}

.pack-sku {
    white-space: nowrap;
    border: var(--bd) solid #c4590f;
}

/* Make vertical textbox when space allows */
@media all and (min-width: 360px) {
    .pack-sku {
        flex: 0; /* disable fill parent size */

        /* Rotate writing direction and element */
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        transform: rotate(180deg);

        text-align: right;
    }
}

.pack-card        { border: var(--bd) solid #2c74b4 }
.pack-title       { border: var(--bd) solid #febf01; font-size: 1.5em; font-weight: bold }
.pack-description { border: var(--bd) solid #6fac45 }
.pack-information { border: var(--bd) solid #fe0000 }

<ul class="list">
    <li class="pack">
        <a href="javascript:void(0)">
            <div class="pack-sku">B01-102 102<br>ordered on 14th may 23</div>
            <div class="pack-card">
                <div class="pack-title">Customer Engagement</div>
                <div class="pack-description">This is the description for the...</div>
                <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
            </div>
        </a>
    </li>
    <li class="pack">
        <a href="javascript:void(0)">
            <div class="pack-sku">B01-102 102<br>ordered on 14th may 23</div>
            <div class="pack-card">
                <div class="pack-title">Customer Engagement</div>
                <div class="pack-description">This is the description for the...</div>
                <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
            </div>
        </a>
    </li>
    <li class="pack">
        <a href="javascript:void(0)">
            <div class="pack-sku">B01-102 102<br>ordered on 14th may 23</div>
            <div class="pack-card">
                <div class="pack-title">Customer Engagement</div>
                <div class="pack-description">This is the description for the...</div>
                <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
            </div>
        </a>
    </li>
</ul>

仍然基于該元素的高度對齊

可以用長寬比:1/1；和負邊距

示例:

.pack-sku{
  ...
  aspect-ratio: 1 / 1
  ...
}
.pack-card {
  background-color: brown;
  margin: -150px; /* example */
}

但是我建議你使用javascript

大概是這樣的:

超文本標記語言

<ul class="packs-list">
  <a href="#">
    <li class="pack">
      <div class="pack-sku">
        <!-- NEW -->
        <span>B01-102 102<br>ordered on 14th may 23</span>
      </div>
      <div class="pack-card">
        <h2 class="pack-title">Customer Engagement</h2>
        <div class="pack-description">This is the descriptin for the.</div>
        <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
      </div>
    </li>
  </a>
</ul>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.pack-sku {
  position: relative;
  background-color: red;
}
.pack-sku > span{
  position: absolute;
  display: block;
  white-space: nowrap;
  transform: rotate(-90deg);
  left: 0;
  bottom: 0;
  right: 0;
}

java描述語言

document.querySelector('.pack-sku').style.width = document.querySelector('.pack-sku span').offsetHeight + 'px';

document.querySelector('.pack-sku').style.height = document.querySelector('.pack-sku span').offsetWidth + 'px';