将段落上方的项目对齐并在图片旁边浮动

塞勒姆

我试图做到这一点:图片

我无法弄清楚如何正确对齐所有内容,而又不能将它们从容器中推出或它们相互重叠。我试图用我的标题,按钮和描述向右浮动图像。我一直很努力地试图找出CSS内要更改的内容,或者它是将内容放置在HTML中的地方。

.section-title {
    display: block;
    text-align: center;
    padding-bottom: 1.5%;
    font-weight: 500;
    font-size: 2.8em;
    transform: translateX(0%) translateY(-25%);
    /* z-index: 0; */
}

.section-title-highlight {
    position: relative;
    color: black;
}

.section-title-highlight:before {
    content: '';
    display: block;
    height: 12px;
    width: 100%;
    background: #35FCCE;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: height .5s;
    z-index: -1;
}

.section-title-highlight:hover:before {
    height: 85%;
}

a {
    text-decoration: none;
    cursor: default;
    display: block;
}

.container {
    padding-top: 3%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 7%;
    margin-top: 0;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background-color: rgb(236, 236, 236);
}

.container-item {
    display: flex;
    flex-direction: column;
}

.block-title {
    display: inline-block;
    padding-left: 44%;
    font-size: 1.7em;
}

.block-image {
    display: inline-block;
    width: 40%;
    height: auto;
    float: left;
    padding-right: 4%;
    position: relative;
}

.block-text {
    display: inline-block;
    text-align: left;
    float: right;
}

#projects {
    height: 600px;
    position: relative;
}
<div class="container">
  <div id="projects">
    <div class="section-title">
      <span class="section-title-highlight">Projects</span>
    </div>
    <h3 class="block-title">Title</h3>
    <div class="container-item">
      <!-- <h3 class="block-title">Title</h3> -->
      <p class="block-text">
        <!-- <h3 class="block-title">Title</h3> -->
        <img class="block-image" src="images/mac on desk 1.png"> I'm baby vape craft beer palo santo truffaut pour-over twee bespoke hella snackwave lomo. Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel
        mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid YOLO. Lumbersexual craft beer pitchfork master cleanse, asymmetrical post-ironic venmo direct trade actually poutine. Fingerstache craft beer master cleanse
        dreamcatcher subway tile XOXO etsy flannel.
        <p class="block-text">Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid YOLO. Lumbersexual craft beer pitchfork master cleanse,
          asymmetrical post-ironic venmo direct trade actually poutine. Fingerstache craft beer master cleanse dreamcatcher subway tile XOXO etsy flannel adaptogen gluten-free pop-up.</p>
      </p>
    </div>
  </div>
</div>

贝基

这很可能是因为您为容器设置了固定的高度。

#projects {
    height: 600px;
}

还有几件事

  1. 使用flexbox。这是此类布局的理想解决方案。
  2. .section-title-highlight是一个跨度。尝试改用标题标签。它将为您带来好处。

这是使用flexbox的简单示例

.container {
  background-color: rgb(236, 236, 236);
  padding: 15px 0;
}

.card-wrapper {
  display: flex;
}

.right-col, .left-col {
  padding: 15px 15px 0 15px;
}

.left-col {
  width: 40%;
}

.right-col {
  width: 60%;
}

.left-col img {
  width: 100%;
  height: auto;
}

.card-wrapper h3{
  font-size: 1.7em;
  margin: 0;
}

.card-wrapper p{
  margin: 12px 0 0 0;
  /*your paharagraph sytles*/
}

.section-title {
  display: block;
  text-align: center;
  padding-bottom: 30px;
  font-weight: 500;
  font-size: 2.8em;
  transform: translateX(0%) translateY(0%);
}

.section-title-highlight {
  position: relative;
  color: black;
}

.section-title-highlight:before {
  content: '';
  display: block;
  height: 12px;
  width: 100%;
  background: #35FCCE;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: height .5s;
  z-index: -1;
}

.section-title-highlight:hover:before {
  height: 85%;
}
<div class="container">
  <div id="projects">
    <div class="section-title">
      <span class="section-title-highlight">Projects</span>
    </div>
    <div class="card-wrapper">
      <div class="left-col">
        <img src="https://a.wattpad.com/useravatar/Coca-Cola.256.650165.jpg">
      </div>
      <div class="right-col">
        <h3>Title</h3>
        <p>I'm baby vape craft beer palo santo truffaut pour-over twee bespoke hella snackwave lomo. Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock.</p>
        <p>Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid YOLO. Lumbersexual craft beer pitchfork.</p>
      </div>
    </div>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章