国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Flexbox 對(duì)齊影像的問(wèn)題與挑戰(zhàn)
P粉068510991
P粉068510991 2024-02-26 00:26:26
0
2
577

我最近一直在開(kāi)發(fā)自己開(kāi)發(fā)的主頁(yè)，並且在彈性盒中對(duì)齊我的專案時(shí)遇到一些困難。第一張 Flexbox 應(yīng)包含三 (3) 張圖片，且所有圖片應(yīng)位於彼此下方的一條垂直線上。

這對(duì)我的第二個(gè)彈性盒也很重要。

這是我的程式碼：

.flexcontainer-1 {
  display: flex;
  justify-content: flex-start;
  align-items: left;
  height: auto;
  width: auto;
}

.flexcontainer-2 {
  display: flex;
  justify-content: flex-end;
  align-items: right;
  height: auto;
  width: auto;
}
<div class="flexcontainer-1">
  <!-- übersicht über alle Immobilien mit entsprechenden Bildern -->
  <h4>Unsere Immobilien</h4>
  <!-- Weiterleitung über Anchor innerhalb des Images zu Einzelbeschreibung, -->
  <!-- übergabe der ID aus Datenbank in den Anchor -->
  <p>
    <a href="db_immobilien_desc_b.php?id=2">
      <img src="../images/haus2.jpg" alt="Beschreibung Haus2"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=3">
      <img src="../images/haus3.jpg" alt="Beschreibung Haus3"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=4">
      <img src="../images/haus4.jpg" alt="Beschreibung Haus4"></a>
  </p>
</div>
<div class="flexcontainer-2">
  <p>
    <a href="db_immobilien_desc_b.php?id=5">
      <img src="../images/haus5.jpg" alt="Beschreibung Haus5"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=6">
      <img src="../images/haus6.jpg" alt="Beschreibung Haus6"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=7">
      <img src="../images/haus7.jpg" alt="Beschreibung Haus6"></a>
  </p>
</div>

它總是在圖片的第二次對(duì)齊中產(chǎn)生間隙，不幸的是我還沒(méi)有找到解決這個(gè)問(wèn)題的解決方案。

我非常感謝提示或建議，以及如何改進(jìn)我的編碼。

提前非常感謝您。

親切的問(wèn)候，

盧克

我嘗試過(guò)使用屬性 justifiy-content 和 align-items，但這對(duì)我來(lái)說(shuō)不起作用。

P粉068510991
P粉068510991

全部回覆(2)
P粉795311321

有多種方法可以實(shí)現(xiàn)此佈局，CSS 網(wǎng)格、Flexbox 和多列佈局都可以（以不同的方式）。

不過(guò)，我建議的第一件事就是修改 HTML。從語(yǔ)義上講，您似乎正在顯示一個(gè)屬性列表，這立即表明應(yīng)該使用一個(gè)列表（無(wú)論是有序列表還是無(wú)序列表）；我建議應(yīng)該有描述性文字和圖像，這反過(guò)來(lái)又表明可以使用<figure> 元素。

透過(guò)此修訂，一旦包裝在<main> 標(biāo)記（或<section>、<article>...）中，上述HTML 可能會(huì)變成如下圖：


  
Unsere Immobilien

  
    
    
  • 
      
    
        
          Beschreibung Haus2
        
        
    PlaceKitten image: 1
    
      
    
    
    • 
    
  • 
      
    
        
          Beschreibung Haus3
        
        
    PlaceKitten image: 2
    
      
    
    
    • 
    
  • 
      
    
        
          Beschreibung Haus4
        
        
    PlaceKitten image: 3
    
      
    
    
    • 
    
  • 
      
    
        
          Beschreibung Haus5
        
        
    PlaceKitten image: 4
    
      
    
    
    • 
    
  • 
      
    
        
          Beschreibung Haus6
        
        
    PlaceKitten image: 5
    
      
    
    
    • 
    
  • 
      
    
        
          Beschreibung Haus6
        
        
    PlaceKitten image: 6
    
      
    
    
    •

將其與多列佈局一起使用，並在 CSS 中添加解釋性註解：

/* 用於提供通用主題的 CSS 自訂屬性
   多重元素：*/
：根 {
  --common間距：1em；
}

/* 一個(gè)簡(jiǎn)單的 CSS 重設(shè)以刪除預(yù)設(shè)邊距，
   和填充物；確保所有瀏覽器都使用
   內(nèi)容的大小調(diào)整演算法相同，且
   套用相同的字體大小和字體系列：*/
*,
 ：：前，
 ：：後 {
  框大?。哼吙蚩?；
  字體系列：系統(tǒng)使用者介面；
  字體大?。?6px；
  保證金：0；
  填充：0；
}

/* 強(qiáng)調(diào)標(biāo)題: */
h4 {
  字體大?。?.8em；
  邊距塊： calc(0.5 * var(--commonSpacing));
  文字對(duì)齊：居中；
}

主要的 {
  /* 設(shè)定內(nèi)聯(lián)軸的大?。▽挾龋⑽暮?     拉丁語(yǔ)）至 80 個(gè)視口寬度單位，最小
     大小為 30 root-em 單位，最大大小為 1300 像素：*/
  內(nèi)聯(lián)尺寸：夾子（30rem，80vw，1300px）；
  /* 使元素在內(nèi)聯(lián)軸上居中: */
  內(nèi)聯(lián)邊距：自動(dòng)；
}

ul {
  /* 使用多列佈局，
     確保兩列：*/
  列數(shù)：2；
  /* 刪除預(yù)設(shè)清單標(biāo)記: */
  清單樣式類型：無(wú)；
  /* 將 
 元素置中
  在
  • 內(nèi)：*/
  文字對(duì)齊：居中；
}

李{
  /* 確保 
    • 

  •  沒(méi)有
     它的內(nèi)容分佈在各個(gè)列中，
     留下難看的孤兒
     列的結(jié)尾或開(kāi)頭：*/
  闖入的：避免；
  /* 元素間隔： */
  邊距塊結(jié)束：var(--commonSpacing);
}
    • #
  
    Unsere Immobilien
    
  
      
    
    • 
      
      
        
          Beschreibung Haus2
        
        
      PlaceKitten 圖片：1
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus3
        
        
      PlaceKitten 圖片：2
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus4
        
        
      PlaceKitten 圖片：3
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus5
        
        
      PlaceKitten 圖片：4
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus6
        
        
      PlaceKitten 圖片：5
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus6
        
        
      PlaceKitten 圖片：6
      
      
      
    
      •
    #

    JS Fiddle 示範(fàn)。

    也可以用CSS來(lái)實(shí)現(xiàn)這一點(diǎn)，雖然搭載網(wǎng)格的數(shù)字網(wǎng)格左到然後右從上到下流動(dòng)：

    /* 用於提供通用主題的 CSS 自訂屬性
   多重元素：*/
：根 {
  --common間距：1em；
}


/* 一個(gè)簡(jiǎn)單的 CSS 重設(shè)以刪除預(yù)設(shè)邊距，
   和填充物；確保所有瀏覽器都使用
   內(nèi)容的大小調(diào)整演算法相同，且
   套用相同的字體大小和字體系列：*/
*,
：：前，
：：後 {
  框大?。哼吙蚩?；
  字體系列：系統(tǒng)使用者介面；
  字體大?。?6px；
  保證金：0；
  填充：0；
}

主要的 {
  /* 設(shè)定內(nèi)聯(lián)軸的大小（寬度，英文和
     拉丁語(yǔ)）至 80 個(gè)視口寬度單位，最小
     大小為 30 root-em 單位，最大大小為 1300 像素：*/
  內(nèi)聯(lián)尺寸：夾子（30rem，80vw，1300px）；
  /* 使元素在內(nèi)聯(lián)軸上居中: */
  內(nèi)聯(lián)邊距：自動(dòng)；
}


/* 強(qiáng)調(diào)標(biāo)題: */
h4 {
  字體大?。?.8em；
  邊距塊： calc(0.5 * var(--commonSpacing));
  文字對(duì)齊：居中；
}

ul {
  /* 使用網(wǎng)格佈局： */
  顯示：網(wǎng)格；
  /* 相鄰元素的間距: */
  間隙：var(--commonSpacing);
  /* 定義兩列，每列取一小部分
     可用空間：*/
  網(wǎng)格模板列：重複（2，1fr）；
  清單樣式類型：無(wú)；
  文字對(duì)齊：居中；
}
    #
  
    Unsere Immobilien
    
  
      
    
    • 
      
      
        
          Beschreibung Haus2
        
        
      PlaceKitten 圖片：1
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus3
        
        
      PlaceKitten 圖片：2
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus4
        
        
      PlaceKitten 圖片：3
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus5
        
        
      PlaceKitten 圖片：4
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus6
        
        
      PlaceKitten 圖片：5
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus6
        
        
      PlaceKitten 圖片：6
      
      
      
    
      •
    #

    JS Fiddle 示範(fàn)。

    並且，使用彈性佈局：

    /* 用於提供通用主題的 CSS 自訂屬性
   多重元素：*/
：根 {
  --common間距：1em；
}


/* 一個(gè)簡(jiǎn)單的 CSS 重設(shè)以刪除預(yù)設(shè)邊距，
   和填充物；確保所有瀏覽器都使用
   內(nèi)容的大小調(diào)整演算法相同，且
   套用相同的字體大小和字體系列：*/
*,
：：前，
：：後 {
  框大?。哼吙蚩?；
  字體系列：系統(tǒng)使用者介面；
  字體大小：16px；
  保證金：0；
  填充：0；
}

主要的 {
  /* 設(shè)定內(nèi)聯(lián)軸的大?。▽挾?，英文和
     拉丁語(yǔ)）至 80 個(gè)視口寬度單位，最小
     大小為 30 root-em 單位，最大大小為 1300 像素：*/
  內(nèi)聯(lián)尺寸：夾子（30rem，80vw，1300px）；
  /* 使元素在內(nèi)聯(lián)軸上居中: */
  內(nèi)聯(lián)邊距：自動(dòng)；
}


/* 強(qiáng)調(diào)標(biāo)題: */
h4 {
  字體大?。?.8em；
  邊距塊： calc(0.5 * var(--commonSpacing));
  文字對(duì)齊：居中；
}

ul {
  /* 使用 Flexbox 版面配置： */
  顯示：柔性；
  /* 簡(jiǎn)寫為：
    彎曲方向：行；
    彈性包裹：包裹； */
  flex-flow：行換行；
  /* 設(shè)定相鄰元素之間的間隙： */
  間隙：var(--commonSpacing);
  /* 刪除預(yù)設(shè)清單標(biāo)記: */
  清單樣式類型：無(wú)；
}

李{
  /* 允許 
  •  擴(kuò)充功能以佔(zhàn)用
     更多空間：*/
  彈性成長(zhǎng)：1；
  /* 設(shè)定元素的大小
     父母的45%；彈性基礎(chǔ)
     始終引用彈性項(xiàng)目的內(nèi)聯(lián)軸，
     可以透過(guò)更新來(lái)修改
     父級(jí)的彎曲方向：*/
  彈性基礎(chǔ)：45%；
  /* 將內(nèi)容放在 
    • 

  •  中：*/
  文字對(duì)齊：居中；
}
    • #
  
    Unsere Immobilien
    
  
      
    
    • 
      
      
        
          Beschreibung Haus2
        
        
      PlaceKitten 圖片：1
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus3
        
        
      PlaceKitten 圖片：2
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus4
        
        
      PlaceKitten 圖片：3
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus5
        
        
      PlaceKitten 圖片：4
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus6
        
        
      PlaceKitten 圖片：5
      
      
      
    
      • 
    
    • 
      
      
        
          Beschreibung Haus6
        
        
      PlaceKitten 圖片：6
      
      
      
    
      •
    #

    JS Fiddle 示範(fàn)。

    參考文獻(xiàn)：

    P粉347804896

    您似乎在第一個(gè)容器中使用 h4 。

    從 flexcontainer-1 中取得此元素。

    為了達(dá)到預(yù)期的結(jié)果，你應(yīng)該這樣做

    .container {
  display: flex;
  gap:10px;
}

.item {
  height: 50px;
  width: 100px;
  background-color: blue
}

.box {
  display: flex;
  flex-direction: column;
  gap: 10px
}
    
  
    
    
    House 1
    
    
    House 2
    
    
    House 3
    
  
    
  
    
    
    House 4
    
    
    House 5
    
    
    House 6
    最新下載
    更多>
    網(wǎng)站特效
    網(wǎng)站源碼
    網(wǎng)站素材
    前端模板