Question

我需要像这张照片一样对齐图像。我的代码是：

<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>

我想在html页面上创建instaframe效果。但我不能在右侧添加图像

Answer 1

您可以使用浮动来达到您想要的效果：

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

最好将浮动元素包装在公共父级中，以便它们不会影响页面元素的其余部分。在这种情况下，父级是<div class="main">。

jsFiddle

Answer 2

您可以使用CSS3 flexbox来实现这一目标; 见下面的代码;您可能还想使用％或ems而不是固定的高度/宽度;

按照上面的回答使用float当然更漂亮，flexbox只是实现相同结果的另一种方式

演示： jsFiddle

.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>

hss页面上的css instaframe效果

2 个答案: