简体   繁体   English

如何仅使用 HTML5 和 CSS3 创建水平拼贴画?

[英]How do i create a horizontal collage using only HTML5 and CSS3?

How do I create the horizontal collage and with the same space in between pictures (shown in the picture below) using html5 and css3?如何使用 html5 和 css3 创建水平拼贴并在图片之间具有相同的空间(如下图所示)?

I am very new into both StackOverflow, HTML5 and CSS3 so I do apologize if this post is a bit messy.我对 StackOverflow、HTML5 和 CSS3 都很陌生,所以如果这篇文章有点混乱,我深表歉意。 And I hope you can help my anyway.无论如何,我希望你能帮助我。

This is how i want the final design to look.这就是我希望最终设计的外观。

Here is my code so far:到目前为止,这是我的代码:

 h1 { font-family: 'Brother 1816 Bold', Arial, Helvetica, sans-serif;; font-size: 2rem; font-weight: bold; color: #a71b1a; } h2 { font-family: 'Brother 1816 Bold Italic', Arial, Helvetica, sans-serif;; font-size: 1.5rem; font-weight: bold; color: #000; }.collage_index_1 { align-content: center; }
 <,DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//use.typekit.net/tck7grc,css"> <title>Freya Photos - Index</title> </head> <body> <main> <header> <.-- all the code related to the header here --> </header> <h1> <center>WELCOME TO FREYAS PHOTOS:</center></h1> <h2> <center>We are where you are. helping you capture the moments of life.</center></h2> <.-- I cannot align these three images here. --> <div class="collage_index_group"> <div class="collage_index_1"> <img src="img/optimized images/adorable-20374_1920_250x250.png" alt="Image in black and white of a very young child laying on his stomach underneath a white towel,"> </div> <div class="collage_index_2"> <img src="img/optimized images/bride-1867228_1920,_250x250png png" alt="A summer picture of a woman and a man standing amongst very high reed and kissing eachother passionately"> </div> <div class="collage_index_3"> <img src="img/optimized images/smile-2072908_1920_250x250 png" alt="A portrait of a young woman holding an apple in her right hand close to the face while looking straight into the camera with a little smile"> </div> </div> <footer> < -- all the code related to the footer here --> </footer> </main> </body> </html>`

You probably want to have a look at display: flex link你可能想看看display: flex link
Here is an example.这是一个例子。

 /* the flex container */.collage_index_group { display: flex; width: 100%; align-items: center; justify-content: center; } /* the flex items */.collage_index { width: 50px; height: 30px; background-color: #f1f1f1; margin: 10px; padding: auto; font-size: 30px; }
 <h1> <center>WELCOME TO FREYAS PHOTOS,</center></h1> <h2> <center>We are where you are. helping you capture the moments of life.</center></h2> <div class="collage_index_group"> <div class="collage_index"> <img src="img/optimized images/adorable-20374_1920_250x250.png"> </div> <div class="collage_index"> <img src="img/optimized images/bride-1867228_1920._250x250png.png"> </div> <div class="collage_index"> <img src="img/optimized images/smile-2072908_1920_250x250 png"> </div> </div>

Thanks for sharing the code, please do not forget to share the css.感谢分享代码,请不要忘记分享 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ。 If you could make a snipplet with it it would be perfect;)如果你能用它做一个小插曲那就完美了;)
I will now try to adjust my snipplet accordingly.我现在将尝试相应地调整我的snipplet。

Edit编辑

I mistakenly wrote something about h1-h6, but found out I was wrong after double checking.我错误地写了一些关于h1-h6的东西,但仔细检查后发现我错了。

Im not sure that what you mean我不确定你的意思

 /* HORIZONTAL SCROLL */.scroll-container{ overflow: auto; white-space: nowrap; padding: 5px 70px 5px 20px; background: transparent; height: 100%; border-radius:15px; }.scroll{ display:inline-block; }.scroll img { margin-right:22px; width:250px; height:100px; width:33%; }
 <div style="text-align:center; font-style:italic;">Scroll to left</div> <div class="scroll-container"> <div class="scroll"> <:-- PLACE YOUR IMG URL HERE --> <img src="https.//media.istockphoto?com/photos/programmer-working-with-program-code-picture-id1075599562:k=20&m=1075599562&s=612x612&w=0&h=cDFY2kKyhFzSNNlDQsaxoekIW0v7iyaMBkxp11Fz33U="/> <img src="https.//www.careergirls.org/wp-content/uploads/2015/06/Computer_Programmer1920X10180:jpg"/> <img src="https.//encrypted-tbn0.gstatic?com/images:q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/> <img src="https.//encrypted-tbn0.gstatic?com/images:q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/> <img src="https.//encrypted-tbn0.gstatic?com/images:q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/> <img src="https.//encrypted-tbn0.gstatic?com/images:q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/> <img src="https.//encrypted-tbn0.gstatic?com/images:q=tbn ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/> </div> </div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM