Question

出于某种原因，这两个div没有彼此对齐，我想知道是否有人能够提供帮助？

如果有人可以提供帮助，这是codepen。

＆＃13;

/*------------------Portfolio(start)------------------*/

.portfolio {
  background-color: #F0F0F0;
  padding-bottom: 55%;
  width: 100%;
  display: inline-block;
}
.portfolio h1 {
  text-align: center;
  font-family: Open Sans;
  font-weight: 300;
  padding-top: 5%;
  color: #212121;
  font-size: 2.4em;
}
.portfolio-wrapper {
  width: 100%;
  display: inline-block;
}
/* port-left-text */

.port-left-text {
  width: 50%;
  margin-left: 5%;
  float: left;
  text-align: left;
  display: inline-block;
}
.port-left-text h1 {
  text-align: left;
}
.port-left-text h3 {
  font-weight: 300;
}
.port-left-text p {
  line-height: 30px;
  font-weight: 300;
}
/* portfolio-right-display */

.portfolio-right-display {
  width: 50%;
  margin-right: 5%;
  float: right;
  text-align: right;
  top: 0;
  display: inline-block;
}
.portfolio-right-display img {
  width: 65%;
  border-radius: 5px;
}
.portfolio-right-display img:hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease 0s;
}

＆＃13;

<div class="portfolio">
  <h1>Portfolio</h1>

  <div class="portfolio-wrapper">
    <div class="port-left-text">
      <h1>Project Title</h1>
      <h3>Project type</h3>

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries,</p>
    </div>

    <div class="portfolio-right-display">
      <a href="#">
        <img src="http://feelgrafix.com/data/background/background-15.jpg">
      </a>
    </div>

  </div>

</div>

＆＃13;

Answer 1

保证金在宽度过程中加起来。要使其完全达到100％，以便divs保持在同一行，您需要加上边距。

例如，在您的代码中，您可以将宽度从50%更改为45%。

.portfolio-right-display {
    width: 45%;
    margin-right: 5%;
    float: right;
    text-align: right;
    top: 0;
    display: inline-block;
}

.port-left-text {
    width: 45%;
    margin-left: 5%;
    float: left;
    text-align: left;
    display: inline-block;
}

这使得45 + 45 + 5 + 5这是一个100.在我改变之前它是50 + 50 + 5 + 5这是110。

祝你好运！

Answer 2

您的合并宽度（包括5％的保证金）超过100％。将宽度设置为45％，它们并排显示。

Answer 3

删除/评论以下两个类的边距：

.port-left-text {
/*padding-top: 5%; */
}
.portfolio-right-display {
width: 50%;
/*  margin-right: 5%; */
}

您给出的宽度为50％，每个元素的额外边距为5％，宽度大于100％。删除边距或减小元素宽度。

Div没有彼此对齐

3 个答案: