css 3个元素右侧的图像

w8rqjzmb 于 2023-01-03 发布在其他

关注(0)|答案(4)|浏览(143)

我有3个图像在<div>中使用display: flex和flex-direction: column
但是我想在这些图片的右边放一张图片，放大到和左边其他图片加起来一样大。
我试着在div里面添加一个div，但是它只是在它下面，而我想让它向右。

.items {
  display: flex;
  flex-direction: column;
  width: 60%;
}

<div class="items">
   <img src="rsc/img/test.png" alt="Join the Discord">
   <img src="rsc/img/test.png" alt="Join the Server">
  <img src="rsc/img/test.png" alt="See our Socials">
  <img src="rsc/img/test2.png" class="rightimg"/> /* Image I want right of the others */
</div>

css

来源：https://stackoverflow.com/questions/74973137/image-to-right-of-3-elements

4条答案

按热度按时间

ve7v8dk21#

.items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 60%;
}

.rightimg {
  width: 100%;
}

前三个图像将在父元素的左侧排成一行，第四个图像将位于父元素的右侧。

赞(0）回复(0）举报 2023-01-03

wlsrxk512#

你在找这样的东西吗？

.items{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width:100%;
}
.cols {
  display:flex;
  flex-direction:column;
}
img{
  height:100%;
  width: 100%;
}

<div class="items">
  <div class="cols">
    <img src="https://picsum.photos/500/300?random=1" alt="Join the Discord">
    <img src="https://picsum.photos/500/300?random=2" alt="Join the Server">
    <img src="https://picsum.photos/500/300?random=3" alt="See our Socials">
  </div>
  <div class="cols">
    <img src="https://picsum.photos/500/800?random=4" class="rightimg">
  </div>
</div>

另一种只使用网格的方法
一个二个一个一个

赞(0）回复(0）举报 2023-01-03

icnyk63a3#

我猜你正在尝试显示3个图像一个在另一个之下和最后一个图像右侧的3个图像。这段代码就可以了。正如你所看到的第一个div显示为一行和两个div内是列。调整高度和宽度，你想要的。

.items {
  display: flex;
  flex-direction: row;
  
}
.col1 img{
    width:100%;
}

.col1
{
    display:flex;
    flex-direction:column;
    
}
.col2 img
{
    width:100%;
    height:100%;
}

.col2{
    position:relative;
      display:flex;
    flex-direction:column;
}

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>demo</title>
</head>
<body>
<div class="items">
    <div class="col1">
   <img src="https://images.pexels.com/photos/4974912/pexels-photo-4974912.jpeg" alt="Join the Discord">
   <img src="https://images.pexels.com/photos/4974912/pexels-photo-4974912.jpeg" alt="Join the Server">
  <img src="https://images.pexels.com/photos/4974912/pexels-photo-4974912.jpeg" alt="See our Socials">
    </div>
   <div class="col2">
      <img src="https://images.pexels.com/photos/4974912/pexels-photo-4974912.jpeg" class="rightimg"/>
  </div>
</div >
    
</body>
</html>

赞(0）回复(0）举报 2023-01-03

sc4hvdpw4#

.items{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width:100%;
}
.cols {
  display:flex;
  flex-direction:column;
}
img{
  height:100%;
  width: 100%;
}

赞(0）回复(0）举报 2023-01-03

我来回答

css 3个元素右侧的图像

4条答案

相关问题

热门标签

最新问答