段落继续推动1 div

时间：2016-10-13 15:18:33

标签： html css

我遇到了一些段落文本的问题，它推动了一个div。我有2行3个div，它在第一行的第一个div将第二行下方的div推到第2行。我只是可以解决为什么它不会推动它下面的3个div的整行。

希望有人可以为我阐明这一点

非常感谢

https://jsfiddle.net/8sk3f59m/ 

 <div class="row">
      <div class="one-third">
        <div class="right-arrow">
          <i class="fa fa-arrow-right" aria-hidden="true"></i>
        </div>
        <div id="wireframe">
          <img src="img/wireframe.svg" class="icons" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod sed do eiusmod</p>
        </div>
      </div>
      <div class="one-third">
        <div class="right-arrow">
          <i class="fa fa-arrow-right" aria-hidden="true"></i>
        </div>
        <div id="develop">
          <img src="img/coding.svg" class="icons" />
          <p>Lorem ipsum dolor sit amet, consectetur </p>
        </div>
      </div>
      <div class="one-third">
        <div id="responsive">
          <img src="img/responsive1.svg" class="icons" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
        </div>
      </div>
      <div class="row">
        <div class="one-third">
          <div id="responsive">
            <img src="img/responsive.svg" class="icons" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
          </div>
        </div>
        <div class="one-third">
          <div id="responsive">
            <img src="img/responsive.svg" class="icons" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod!</p>
          </div>
        </div>
        <div class="one-third">
          <div id="responsive">
            <img src="img/responsive.svg" class="icons" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
          </div>
        </div>
      </div>
    </div>



* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-size: 20px;
  font-family: 'Lato', sans-serif;
  background-color: #fff;
  position: relative;
  font-weight: 200;
}

p {
  padding: 10px 0;
}

img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-weight: normal;
  text-align: center;
  padding-bottom: 2%;
}

.justify {
  text-align: justify;
}


/*--Basic Setup End--*/


/*--Reusable Content Start--*/

.chart-wrapper {
  width: 70%;
  margin: 5% auto 3% auto;
}

.clearfix {
  zoom: 1
}

.clearfix:after {
  content: '.';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

.long-row {
  width: 85%;
  margin: 0 auto;
  position: relative;
}

.row {
  max-width: 950px;
  margin: 0 auto;
  position: relative;
}

.row {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
}

.row:before,
.row:after {
  content: "";
  display: table;
}

.long-row:before,
.long-row:after {
  content: "";
  display: table;
}

.row:after {
  clear: both;
}

.long-row:after {
  clear: both;
}

.one-half {
  width: 50%;
  float: left;
  margin: 2% auto;
  padding: 0 20px;
}

.one-third {
  width: 33.333%;
  float: left;
  margin: 2% auto;
  padding: 0 20px;
  position: relative;
}

.two-thirds {
  width: 66.667%;
  float: left;
  margin: 2% auto;
  padding: 0 20px;
}

.icon-center {
  text-align: center;
}

.icons {
  width: 100px;
  height: 100px;
  opacity: 0.7;
}

.section-wrap {
  margin: 4% auto;
}

.icon-heading {
  display: block;
  font-style: normal !important;
  font-weight: 500;
  padding: 2% 0;
}

.underline {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}


#vision {
  margin: 2% 0;
}

.right-arrow {
  position: absolute;
  display: inline-block;
  top: 25%;
  right: 0;
  opacity: 0.7;
}

#wireframe,
#develop,
#responsive,
i {
  text-align: center;
}

2 个答案:

答案 0 :(得分：0)

您忘了在第一个</div>中加入结束.row。包括这将解决你的身高对齐问题。

<强> JSFiddle

＆＃13;
＆＃13; 
/*--Colors--/*

#00cc00 - Green
#7fe57b - Green Gradient


/*--Basic Setup Start--*/

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-size: 20px;
  font-family: 'Lato', sans-serif;
  background-color: #fff;
  position: relative;
  font-weight: 200;
}

p {
  padding: 10px 0;
}

img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-weight: normal;
  text-align: center;
  padding-bottom: 2%;
}

.justify {
  text-align: justify;
}


/*--Basic Setup End--*/


/*--Reusable Content Start--*/

.chart-wrapper {
  width: 70%;
  margin: 5% auto 3% auto;
}

.clearfix {
  zoom: 1
}

.clearfix:after {
  content: '.';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

.long-row {
  width: 85%;
  margin: 0 auto;
  position: relative;
}

.row {
  max-width: 950px;
  margin: 0 auto;
  position: relative;
}

.row {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
}

.row:before,
.row:after {
  content: "";
  display: table;
}

.long-row:before,
.long-row:after {
  content: "";
  display: table;
}

.row:after {
  clear: both;
}

.long-row:after {
  clear: both;
}

.one-half {
  width: 50%;
  float: left;
  margin: 2% auto;
  padding: 0 20px;
}

.one-third {
  width: 33.333%;
  float: left;
  margin: 2% auto;
  padding: 0 20px;
  position: relative;
}

.two-thirds {
  width: 66.667%;
  float: left;
  margin: 2% auto;
  padding: 0 20px;
}

.icon-center {
  text-align: center;
}

.icons {
  width: 100px;
  height: 100px;
  opacity: 0.7;
}

.section-wrap {
  margin: 4% auto;
}

.icon-heading {
  display: block;
  font-style: normal !important;
  font-weight: 500;
  padding: 2% 0;
}

.underline {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}


#vision {
  margin: 2% 0;
}

.right-arrow {
  position: absolute;
  display: inline-block;
  top: 25%;
  right: 0;
  opacity: 0.7;
}

#wireframe,
#develop,
#responsive,
i {
  text-align: center;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row">
      <div class="one-third">
        <div class="right-arrow">
          <i class="fa fa-arrow-right" aria-hidden="true"></i>
        </div>
        <div id="wireframe">
          <img src="img/wireframe.svg" class="icons" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod sed do eiusmod</p>
        </div>
      </div>
      <div class="one-third">
        <div class="right-arrow">
          <i class="fa fa-arrow-right" aria-hidden="true"></i>
        </div>
        <div id="develop">
          <img src="img/coding.svg" class="icons" />
          <p>Lorem ipsum dolor sit amet, consectetur </p>
        </div>
      </div>
      <div class="one-third">
        <div id="responsive">
          <img src="img/responsive1.svg" class="icons" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
        </div>
      </div>
      </div>
      <div class="row">
        <div class="one-third">
          <div id="responsive">
            <img src="img/responsive.svg" class="icons" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
          </div>
        </div>
        <div class="one-third">
          <div id="responsive">
            <img src="img/responsive.svg" class="icons" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod!</p>
          </div>
        </div>
        <div class="one-third">
          <div id="responsive">
            <img src="img/responsive.svg" class="icons" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
          </div>
        </div>
      </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这是因为浮动元素：文本使第一个div阻止高于下面的阻塞，所以第四个会在第二个下浮动，因为仍然有一些“垂直空间”（1px将是已经够了。）

避免这种情况的最简单方法是扩展.row的CSS规则，使其成为灵活容器，其中包含flex-items，可以换行到下一行：

.row {
    max-width: 950px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

小提琴：https://jsfiddle.net/Ln0r83qn/

相关问题
最新问题