我想以一種快速響應的方式將2張圖片集中到

我想將兩張圖片放在屏幕中間，但不希望它們碰到彼此。這是一個學校項目，我對HTML和CSS並不是很有經驗，所以如果你能幫助我，那將是驚人的！我的老師告訴我要創建這些展示桌，但我不瞭解它們是如何工作的，所以如果你也可以給我一個關於它如何工作的提示，我將不勝感激！提前致謝！如果你需要我發送任何其他信息，請告訴我，因爲我不知道除了我上面講的內容外，還有什麼要放在那裏。我想以一種快速響應的方式將2張圖片集中到

HTML代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Correia e Figueiredo</title> 
     <link rel="stylesheet" href="css/index.css" type="text/css"/> 
     </head> 
    <body> 
    <div id="imagens"> 
     <div id="Morph1" class="images"> 
      <a href="figueiredo.html"> <img src="images/Morph1.png"> </a> 
      </div> 
      <div id="Morph2" class="images"> 
      <a href="figueiredo.html"> <img src="images/Morph2.png"> </a> 
      </div> 
    </div> 
    </body> 
</html>

CSS代碼：

`*{ 
    margin:0; 
    padding:0; 
} 

body{ 
    background-color: beige; 
} 

#imagens { 
    display: table; 
} 

#Morph1 { 
    display: table-cell; 
} 


#Morph2 { 
    display: table-cell; 
} 

.images a img { 
    border-radius: 100%; 
    width: 30%; 
    margin: 0 auto; 
    text-align: center; 
} 

.images { 
    text-align: center; 
    width:50%; 
}`

來源

2016-11-09 Gonçalo Correia

我想你可以定義利潤率.images： '.images ::第一胎{ 保證金：0 0 2px的汽車; } .images :: last-child { margin：0 auto 0 2px; }' 如果您放置兩張圖像，它必須工作 – Banzay

您也可以通過在圖像上使用一點janky flexbox裁剪和邊距，但似乎已經有更好的選項了。 – Crowes

嘗試用這種

#imagens {width:100%;} 
.images {padding: 10px} /*delete text-align: center*/ 
#Morph1 {text-align: right;} 
#Morph2 {text-align: left;}

來源

2016-11-09 14:13:35

兩個#Morph1和#Morph2使用padding，將做的工作。

就像：

#Morph1 { 
    display: table-cell; 
    padding: 0 10px; 
    text-align: right; 
} 


#Morph2 { 
    display: table-cell; 
    padding: 0 10px; 
    text-align: left; 
}

看看下面的代碼片段：

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
body{ 
 
    background-color: beige; 
 
} 
 

 
#imagens { 
 
    display: table; 
 
} 
 

 
#Morph1 { 
 
    display: table-cell; 
 
    padding: 0 10px; 
 
    text-align: right; 
 
} 
 

 

 
#Morph2 { 
 
    display: table-cell; 
 
    padding: 0 10px; 
 
    text-align: left; 
 
} 
 

 
.images a img { 
 
    border-radius: 100%; 
 
    width: 30%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.images { 
 
    text-align: center; 
 
    width:50%; 
 
}

<div id="imagens"> 
 
     <div id="Morph1" class="images"> 
 
      <a href="figueiredo.html"> <img src="http://lorempixel.com/400/400"> </a> 
 
      </div> 
 
      <div id="Morph2" class="images"> 
 
      <a href="figueiredo.html"> <img src="http://lorempixel.com/400/400"> </a> 
 
      </div> 
 
    </div>

希望這有助於！

來源

2016-11-09 14:15:10

.img { 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    height: 30px; 
} 
#images{ 
    text-align:center; 
}

<div id="images"> 
<a href="#"> 
<img class="img" border="0" alt="" src="https://wallpapers.pub/web/wallpapers/birds-water-spray-wallpaper/3840x2160.jpg"/></a> 
<a href="#" target="_blank"> 
    <img class="img" border="0" alt="" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /></a></div>

鏈接： - https://jsfiddle.net/ghnthrbn/

來源

2016-11-09 15:43:10

我想以一種快速響應的方式將2張圖片集中到

回答

相關問題