html,css中两个元素的对齐方式

Question

我有以下代码：

 @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .blogmaster { display: flex; } .blogmaster div { width: 98.6%; } @media all and (max-width: 500px) { .blogmaster {flex-flow: wrap;} } .container1{ display: flex; justify-content: center; padding: 20px; overflow: hidden; } .square:hover { -webkit-transform: translate(20px, -10px); -ms-transform: translate(10px, -10px); transform: translate(10px, -10px); -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); } .square{ width: 460px; height: 430px; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .mask{ clip: rect(0px, 460px, 220px, 0px); border-radius: 4px; position: absolute; } img1{ width: 560px; } .h11{ margin: auto; text-align: left; margin-top: 240px; padding-left: 30px; padding-right: 30px; font-family: 'Merriweather', serif; font-size: 24px; } p9 { text-align: justify; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #C8C8C8; line-height: 18px; padding-left: 30px; padding-right: 30px; display: block; } .button56 { background-color: #3EDD84; color: white; width: 100px; padding: 10px 18px; border-radius: 3px; text-align: center; text-decoration: none; display: block; margin-top: 15px; margin-left: 30px; margin-right: 70px; font-size: 12px; cursor: pointer; font-family: 'merriweather'; }

 <div class="blogmaster"> <div class="column1"> <div class="row1"> <div class="container1"> <div class="square"> <img src="https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1c8fe0c9197d66232511525bfd1cc82&auto=format&fit=crop&w=1100&q=80" class="mask" style="border: 5px solid #555"> <div class="h11">Sample Text Goes here</div> <p9>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in.</p9> <div><a href="#" target="_" class="button56">Read More</a></div> </div> </div> </div> </div> </div> <!-- new start of blog --> <div class="blogmaster"> <div class="column1"> <div class="row1"> <div class="container1"> <div class="square"> <img src="https://www.isfasports.gr/image/cache/data/products/pr_3-1100x1100.jpg" class="mask" style="border: 5px solid #555"> <div class="h11">Sample Text Goes Here</div> <p9>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in.</p9> <div><a href="#" target="_" class="button56">Read More</a></div> </div> </div> </div> </div> </div>

当您运行上述代码时，在新页面中打开它，检查它以在较小的设备上查看它，这正是我正在寻找的。 （除了由于某种原因图像的宽度有点宽，但我可以稍后修复它）

这两张卡在响应模式下或在较小的设备上查看时垂直排列。

现在的问题是，当你想在更大的屏幕上查看卡片时，卡片仍然是垂直放置的，这不是我想要的。

我得到这个输出：

预期输出：

当用户在笔记本电脑或台式机等大屏幕上查看卡片时，输出应该是：

在大屏幕上，它们应该彼此并排放置，它们之间的空间量应与预期输出图片中看到的一样。

但是，在较小的屏幕上，它们应该垂直放置，这很好用。 因此，唯一的问题是让两张卡并排放置，并在更大屏幕上的预期输出图片中看到它们之间的空间量。 有什么建议？

Answer 1

使父 div 具有样式（显示：flex），然后在父 div 内使两个子 div 具有（宽度：50%）的样式，然后在每个子 div 内放置您的卡片..

您也可以使用或查看引导卡和代码结构

Answer 2

这是你的预期结果，你必须在你的卡片上工作

 @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .blogmaster { display: flex; } .blogmaster div { width: 98.6%; } @media all and (max-width: 500px) { .blogmaster { flex-flow: wrap; } } .container1 { display: flex; justify-content: center; padding: 20px; overflow: hidden; } .square:hover { -webkit-transform: translate(20px, -10px); -ms-transform: translate(10px, -10px); transform: translate(10px, -10px); -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); } .square { width: 460px; height: 430px; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .mask { clip: rect(0px, 460px, 220px, 0px); border-radius: 4px; position: absolute; } img1 { width: 560px; } .h11 { margin: auto; text-align: left; margin-top: 240px; padding-left: 30px; padding-right: 30px; font-family: 'Merriweather', serif; font-size: 24px; } p9 { text-align: justify; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #C8C8C8; line-height: 18px; padding-left: 30px; padding-right: 30px; display: block; } .button56 { background-color: #3EDD84; color: white; width: 100px; padding: 10px 18px; border-radius: 3px; text-align: center; text-decoration: none; display: block; margin-top: 15px; margin-left: 30px; margin-right: 70px; font-size: 12px; cursor: pointer; font-family: 'merriweather'; } .parent-div { display: flex; flex-wrap: nowrap; justify-content: center; } @media screen and (max-width: 480px) { .parent-div { flex-direction: column; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent-div"> <div class="child-div"> <div class="blogmaster"> <div class="column1"> <div class="row1"> <div class="container1"> <div class="square"> <img src="https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1c8fe0c9197d66232511525bfd1cc82&auto=format&fit=crop&w=1100&q=80" class="mask" style="border: 5px solid #555"> <div class="h11">Sample Text Goes here</div> <p9>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in.</p9> <div><a href="#" target="_" class="button56">Read More</a></div> </div> </div> </div> </div> </div> </div> <div class="child-div"> <div class="blogmaster"> <div class="column1"> <div class="row1"> <div class="container1"> <div class="square"> <img src="https://www.isfasports.gr/image/cache/data/products/pr_3-1100x1100.jpg" class="mask" style="border: 5px solid #555"> <div class="h11">Sample Text Goes Here</div> <p9>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in.</p9> <div><a href="#" target="_" class="button56">Read More</a></div> </div> </div> </div> </div> </div> </div> </div> <!-- new start of blog --> </body> </html>

Answer 3

**Good Questions**

 @media only screen and { .container { dispaly: inline; width: 100%; height: auto; } } .container { width: 100%; height: auto; display: flex; justify-content: space-around; } .hove{ width:45%; height:330px; } .one, .two { width: 95%; height: auto; transition:0.4s; } .one:hover{ box-shadow:-3px -3px gray; margin-left:5px; margin-top:5px; } .two:hover{ box-shadow:-3px -3px gray; margin-left:5px; margin-top:5px; } .imag { width: 100%; height: 150px; background-size: cover; } .header { font-size: 1em; } .main { padding: 10px; } .para { color: gray; } .botton a { text-decoration: none; padding: 5px; background-color: cyan; color: white; }

 <div class="container"> <div class="hove"> <div class="one"> <img src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/202005/onlien_learning-770x433.png?NgH_DvUqFI63YN.PB.2UPyiG3wzQTf2e" class="imag"> <div class="main"> <h2 class="header">Sample Text Goes Here</h2> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in. </p> <div class="botton"> <a href="">Read More</a> </div> </div> </div> </div> <div class="hove"> <div class="two"> <img src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/202005/onlien_learning-770x433.png?NgH_DvUqFI63YN.PB.2UPyiG3wzQTf2e" class="imag"> <div class="main"> <h2 class="header">Sample Text Goes Here</h2> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in. </p> <div class="botton"> <a href="">Read More</a> </div> </div> </div> </div> </div>