ਇਮੇਜ਼ ਦੀ ਪੈਰੋਲੇਸ਼ਨ ਕਿਵੇਂ ਕਰੋ

ਕਿਵੇਂ CSS ਦੀ ਮਦਦ ਨਾਲ ਇਮੇਜ਼ ਦੀ ਪੈਰੋਲੇਸ਼ਨ ਕਰੋ।

如何并排放置图像

第一步 - 添加 HTML：

第二步 - 添加 CSS：

如何使用 CSS float 属性创建并排图像：

浮动实例

/* 三个图像容器（四个图像容器使用 25%，两个图像容器使用 50%，以此类推） */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* 清除图像容器后的浮动 */
.row::after {
  content: "";
  clear: both;
  display: table;
}

ਸਵੈ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

如何使用 CSS flex 属性创建并排图像：

ਫਲੈਕਸ ਢਾਂਚੇ ਉਦਾਹਰਣ

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

ਸਵੈ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਧਿਆਨ:Flexbox ਇੰਟਰਨੈੱਟ ਈਕਸਪਲੋਰਰ 10 ਅਤੇ ਘੱਟ ਤੋਂ ਘੱਟ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ। ਤਿੰਨ ਸਤੰਭ ਢਾਂਚੇ ਲਈ float ਜਾਂ flex ਦਾ ਚੁਣਨਾ ਤੁਹਾਡਾ ਹੈ। ਪਰ ਜੇਕਰ ਤੁਸੀਂ IE10 ਜਾਂ ਘੱਟ ਤੋਂ ਘੱਟ ਦੀ ਸਮਰਥਨ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਫਲੌਟ ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

ਸੁਝਾਅ:ਲਿੰਗਸ਼ੀਲ ਫਲੈਕਸ ਢਾਂਚੇ ਬਾਰੇ ਜਾਣਕਾਰੀ ਮਿਲਣ ਲਈ ਸਾਡੇ CSS Flexbox ਸਿੱਖਿਆ。

ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਕਰੋ

ਜਾਂ ਤਾਂ ਤੁਸੀਂ ਮੀਡੀਆ ਪੜਾਅ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ, ਤਾਕਿ ਚਿੱਤਰ ਵਿਸ਼ੇਸ਼ ਸਕਰੀਨ ਚੌਦਾਈ 'ਤੇ ਸ਼ਿਸ਼ਟ ਹੋਣ ਅਤੇ ਸਮੇਂ ਵਿੱਚ ਨਾ ਹੋਣ。

ਇਹ ਉਦਾਹਰਣ 500px ਦੀ ਚੌਦਾਈ ਜਾਂ ਘੱਟ ਦੀ ਚੌਦਾਈ ਦੇ ਸਕਰੀਨ 'ਤੇ ਚਿੱਤਰਾਂ ਨੂੰ ਸ਼ਿਸ਼ਟ ਹੋਣ ਦੇਵੇਗਾ:

ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਉਦਾਹਰਣ

/* ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਢਾਂਚਾ - ਤਿੰਨ ਸਤੰਭ ਪਾਸੇ ਹੋਣ ਨਾ ਕਿ ਸਮੇਂ ਵਿੱਚ */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

ਸਵੈ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਮੀਡੀਆ ਪੜਾਅ ਬਾਰੇ ਜਾਣਕਾਰੀ ਮਿਲਣ ਲਈ ਸਾਡੇ CSS ਮੀਡੀਆ ਪੜਾਅ ਸਿੱਖਿਆ。

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆਕਾਰਾਂ:CSS 图像

ਸਿੱਖਿਆਕਾਰਾਂ:CSS ਸਮੁੰਦਰਾਕਾਰ ਸਿੱਖਿਆ

ਸਿੱਖਿਆਕਾਰਾਂ:CSS 图片库