HTML页面上的CSS InstaFrame效果
[英]css instaframe effect on html page
问题描述
I need to align images like this photo. 
我需要对齐这张照片。 My code is: 我的代码是：
<html>
<head>
<style>
.main
{
width: 634px;
height: 634px;
}
.img1
{
width: 315px;
height: 315px;
}
</style>
</head>
<body>
<img src="photo/01.jpg" class="main"><br>
<img src="photo/05.jpg" class="img1">
<img src="photo/01.jpg" class="img1">
<img src="photo/01.jpg" class="img1">
</body>
</html>
I want to create instaframe effect on html page. 我想在html页面上创建instaframe效果。 But I cant add images to the right side 但是我不能在右侧添加图像
2 个解决方案
解决方案1
1 已采纳 2016-02-28 20:30:50
You can use floating to achieve your desired effect: 您可以使用float来实现所需的效果：
.main { width:80%; /* width can be anything */ overflow:auto; /* clears floating */ } .main img { width:33.33%; /* images are responsive, usually 3 images per row (33.33) */ height: auto; /* resize height based on width to keep image proportion */ float:left; /* float images to the left */ border:2px solid white; /* optional border */ box-sizing:border-box; /* makes sure border does not break total width */ } .main img.big { width:66.66%; /* big image takes 2/3 of grid size, so 66.66 of 100 */ }
<div class="main"> <img src="https://placehold.it/100x100" class="big"> <img src="https://placehold.it/100x100"> <img src="https://placehold.it/100x100"> <img src="https://placehold.it/100x100"> <img src="https://placehold.it/100x100"> <img src="https://placehold.it/100x100"> </div>
It is best to wrap the floated elements inside a common parent so that they do not affect the rest of page elements. 最好将浮动元素包装在一个公共父元素内，以免影响其他页面元素。 In this case, the parent is <div class="main"> . 在这种情况下，父级为<div class="main"> 。
解决方案2
1 2016-02-28 20:50:57
You can use CSS3 flexbox to achieve this; 您可以使用CSS3 flexbox实现此目的； See code below; 参见下面的代码； you probably also want to use % or ems instead of fixed height/width; 您可能还想使用％或ems代替固定的高度/宽度；
using float as per answer above is more beautiful of course, flexbox is just one more way to achieve same results 当然，按照上面的答案使用float会更漂亮，flexbox只是获得相同结果的另一种方法
.main { width: 300px; height: 300px; } .img { width: 150px; height: 150px; } .rowContainer { display: flex; flex-direction: row; flex-wrap: wrap; } .columnContainer { display: flex; flex-direction: column; } .mainContainer { width: 450px }
<div class="mainContainer"> <div class="columnContainer"> <div class="rowContainer"> <img class="main"> <div class="columnContainer"> <img class="img"> <img class="img"> </div> </div> <div class="rowContainer"> <img class="img"> <img class="img"> <img class="img"> <img class="img"> <img class="img"> <img class="img"> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.