css 我有一个容器，其中有3个div，我想在容器中设置它们的样式

ss2ws0br 于 2023-01-22 发布在其他

关注(0)|答案(1)|浏览(167)

所以我有一个容器，有3个div，我想在容器中设置样式，第一个div在左上角，第二个是图片div，用于容器的右侧，第三个是标题，带有社交媒体按钮，在第一个div下面，但它们是间隔开的。我希望第一个div位于容器的左上角，留有一定的边距，这样它就不会直接位于边缘，而是div与span标记的组合，第二个是img，用于容器的右侧，最后一个div用于在第一个div下方留出空间

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
}

.right-img {
  order: 2;
  flex-basis: 30%;
}

.left-top {
  order: 1;
  flex-basis: 30%;
}

.left-bottom {
  order: 3;
  flex-basis: 30%;
  display: flex;
  flex-wrap: wrap;
}

#text1, #text2, #text3 {
  font-size: 4em;
  text-align: center;
}

.social-media-title {
  align-items: flex-end;
  font-size: 1.5em;
  margin-bottom: 20px;
}

.buttons {
  display: flex;
}

.buttons a {
  align-items: flex-start;
  background: none;
  border: none;
  font-size: 1.5em;
  color: #333;
  text-decoration: none;
}

.buttons a:hover {
  color: #1c87c9;
}

@media (max-width: 600px) {
  .right-img {
    order: 1;
    flex-basis: 100%;
  }
  .left-top {
    order: 2;
    flex-basis: 100%;
  }
  .left-bottom {
    order: 3;
    flex-basis: 100%;
  }
}

<div class="container">
  <div class="left-top">
    <div id="typewriter">
      <span class="text-1">Hi, I'm</span>
      <span class="text-2">Adam</span>
      <div class="text-3">I'm a <span class="typing"></span></div>
    </div>
  </div>
  <div class="left-bottom">
    <p>Find Me On</p>
    <div class="buttons">
        <a href=""><i class="fab fa-github"></i></a>
        <a href=""><i class="fab fa-linkedin"></i></a>
        <a href=""><i class="fab fa-twitter"></i></a>
    </div>
  </div>
  <div class="right-img">
    <img src="image.jpg" alt="adam-mohamed-web-developer">
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75187871/so-i-have-a-container-with-3-divs-that-i-want-to-style-in-the-container

1条答案

按热度按时间

5sxhfpxr1#

将容器的显示flex更改为显示grid，并使用grid-template-areas将每个对象放置在您希望的位置。还要为每个div分配一个grid-area，因为它将用于分配其区域。
JSF中间文件：https://jsfiddle.net/83n0pwcf/6/

.container {
  display: grid;
  grid-template-columns: 1fr, 1fr;
  grid-template-areas: 
    'left-top img'
    'bottom-left .';
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
}

.right-img {
  order: 2;
  flex-basis: 30%;
  grid-area: img;
}

.left-top {
  order: 1;
  flex-basis: 30%;
  grid-area: left-top;
}

.left-bottom {
  order: 3;
  flex-basis: 30%;
  display: flex;
  flex-wrap: wrap;
  grid-area: bottom-left;
}

#text1, #text2, #text3 {
  font-size: 4em;
  text-align: center;
}

.social-media-title {
  align-items: flex-end;
  font-size: 1.5em;
  margin-bottom: 20px;
}

.buttons {
  display: flex;
}

.buttons a {
  align-items: flex-start;
  background: none;
  border: none;
  font-size: 1.5em;
  color: #333;
  text-decoration: none;
}

.buttons a:hover {
  color: #1c87c9;
}

@media (max-width: 600px) {
  .right-img {
    order: 1;
    flex-basis: 100%;
  }
  .left-top {
    order: 2;
    flex-basis: 100%;
  }
  .left-bottom {
    order: 3;
    flex-basis: 100%;
  }
}

<div class="container">
  
    <div class="left-top">
      <div id="typewriter">
        <span class="text-1">Hi, I'm</span>
        <span class="text-2">Adam</span>
        <div class="text-3">I'm a <span class="typing"></span></div>
      </div>
    </div>
    <div class="right-img">
      <img src="image.jpg" alt="adam-mohamed-web-developer">
    </div>
  
  
  <div class="left-bottom">
    <p>Find Me On</p>
    <div class="buttons">
        <button>icon 1</button>
        <button>icon 2</button>
        <button>icon 3</button>
    </div>
  </div>
</div>

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

我来回答

css 我有一个容器，其中有3个div，我想在容器中设置它们的样式

1条答案

相关问题

热门标签

最新问答